鼠标悬停按钮禁用答案

【问题标题】：On mouseout button disables鼠标悬停按钮禁用
【发布时间】：2021-04-30 17:35:54
【问题描述】：

我是新手，如果我听起来很愚蠢，请原谅我。

所以我试图让鼠标移出按钮禁用。到目前为止，这是我尝试过的：（提前致谢！）

function alertonclick() {
  alert("You got me! GG. At least I tried.");
}    
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}      

    addEvent(document, "mouseout", function(e) {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;
        if (!from || from.nodeName == "HTML") {
          document.getElementById("button").disabled = true;
                document.getElementById("button").value = "BUTTON IS DISABLED";
                document.getElementById("button").style.background='808080';

                }
    });

HTML

<button id="button" tabindex="-1" onclick="alertonclick()" class="Rainbow buttonmove notouch button1 btn">Button</button>

【问题讨论】：

我确实添加了所有内容。
addEvent 在哪里被调用？并且禁用，您只是表示颜色已更改还是真的没有交互性？
哦，等等我忘了添加一些东西！
@ScottMarcus 当我的意思是禁用时，我的意思是颜色改变而不是交互。
我投票结束这个问题，因为 OP 一直对代码应该做什么提出不同的要求。

标签： javascript html jquery css button

【解决方案1】：

好的，首先不需要您的整个addEvent 函数，除非您怀疑您可能有用户使用Internet Explorer 8！自 IE 9 (1995) 以来的所有浏览器都支持.addEventListener()。

出于同样的原因，您也不需要：e = e ? e : window.event;。

接下来，you shouldn't be using inline HTML event attributes 和 onclick 一样，因为它们是处理 25 多年前事件的传统方法，并且仅在今天仍然存在，因为人们只是看到其他人使用它们并复制/粘贴它们而不理解他们为什么应该这样做'不能使用。将 JavaScript 与 HTML 分开，并使用您在 addEvent 函数中实际使用的 .addEventListener()。

您尝试设置颜色不正确，因为您没有在十六进制代码前添加“#”，将其标识为十六进制颜色。

最后，如果您希望能够在鼠标返回按钮时与按钮进行交互，那么您真的不想禁用该按钮（因为这样您就不会触发 mouseover 事件鼠标回到它上面）。

确实，您的大部分代码都不需要。本质是这样的：

const btn = document.getElementById("button")

btn.addEventListener("mouseout", function(e) {
  this.textContent = "BUTTON IS DISABLED";
  this.classList.add("disabled");
});

btn.addEventListener("mouseover", function(e) {
  this.textContent = "BUTTON ENABLED";
  this.classList.remove("disabled");
});

.disabled { background-color:#808080; }

&lt;button id="button" tabindex="-1" class="Rainbow buttonmove notouch button1 btn"&gt;Button&lt;/button&gt;

【讨论】：

我希望按钮在鼠标离开时禁用并变为灰色，并且它也变为灰色。不是点击！
@SamiOsman 你不是很清楚。你说过当鼠标悬停在它上面时你确实想与它进行交互，所以它必须是可点击的。
不，我没有这么说！我说鼠标离开/鼠标退出按钮禁用和（可选）变灰，
@SamiOsman 在上面的 cmets 中，您说“就像我想在鼠标离开时禁用它，然后在鼠标回来时重新启用它。”
是的，这更好，但（我希望我不是太多）让它重新启用不是在悬停时而是在重新输入时

【解决方案2】：

试试这个：

var button = document.getElementById('button');
button.addEventListener('mouseleave', function () {
button.setAttribute('disabled', 'disabled');
});

不需要 jquery :-)

【讨论】：

有没有办法让它改变颜色？当光标返回时颜色变回来并且按钮不再禁用？
好吧，如果你想在光标回到按钮后重新激活按钮，那么禁用它有什么意义呢？如果你只想改变它的颜色，那么 css 就足够了：#button {background-color: #333; color: #fff;} #button:hover {background-color: #eee; color: #333;} *example colors used just to show the change
就像我想在鼠标离开时禁用它，然后在鼠标回来时重新启用它。颜色变化是可选的，只是为了一个技巧。你明白吗？
如果是这样，复制我的示例代码，并将事件替换为 'mouseenter' 和 setAttribute('disabled', 'disabled') 调用替换为 removeAttribute('disabled') :)