.mouseover 和 .mouseout 在禁用的按钮上仍然起作用吗？

Question

我花了很长时间制作这个网站，我很恐慌。

几个月甚至几年我的语法都运行良好。

一切都像多米诺骨牌效应一样。大多数情况下每个按钮都被禁用。您单击一个按钮，就像兔子洞一样，每次单击都会启用和禁用特定按钮。

现在当我打开网站时。就好像代码自己搞砸了一样，无法正确读取任何内容。我移动鼠标，鼠标悬停事件中嵌入的所有内容都在不应该工作时工作。

我的代码部分：

var art2 = document.getElementById('drawing2');
var art3 = document.getElementById('drawing3');
var art4 = document.getElementById('drawing4');
var arttext = document.getElementById('drawingtext');
var arttext2 = document.getElementById('drawingtext2');

playface.addEventListener('mouseover', playface);
stopface.addEventListener('mouseout', stopface);

function playface() {
  art3.classList.add('intervention');
  setTimeout(() => {
    art3.classList.remove('intervention');
  }, 650);
  setTimeout(() => {
    art3.classList.add('creep');
  }, 651);
  setTimeout(() => {
    art3.classList.remove('creep');
  }, 1020);
  setTimeout(() => {
    art2.classList.add('bleed4me');
  }, 806);
  setTimeout(() => {
    art2.classList.remove('bleed4me');
  }, 950);
  setTimeout(() => {
    art2.classList.add('bleed4me');
  }, 990);
  setTimeout(() => {
    art2.classList.remove('bleed4me');
  }, 2030);
  setTimeout(() => {
    art2.classList.add('sonk');
  }, 15050);
  setTimeout(() => {
    art3.classList.add('blick');
  }, 17105);
  setTimeout(() => {
    art3.classList.remove('blick');
  }, 20302);
  setTimeout(() => {
    art4.classList.add('blick2');
  }, 17175);
  setTimeout(() => {
    art4.classList.remove('blick2');
  }, 18225);
  setTimeout(() => {
    art2.classList.remove('sonk');
  }, 17755);
  setTimeout(() => {
    art2.classList.add('orgfe');
  }, 17775);
  setTimeout(() => {
    arttext.classList.add('hertbrek');
  }, 17775);
  setTimeout(() => {
    arttext2.classList.add('anner');
  }, 17775);
  setTimeout(() => {
    art2.classList.remove('orgfe');
  }, 19805);
  setTimeout(() => {
    arttext.classList.remove('hertbrek');
  }, 19805);
  setTimeout(() => {
    arttext2.classList.remove('anner');
  }, 19805);
}

function stopface() {
  art3.classList.remove('intervention');
  art3.classList.remove('creep');
  art2.classList.remove('bleed4me');
  art2.classList.remove('bleed4me');
  art3.classList.remove('blick');
  art4.classList.remove('blick2');
  art2.classList.remove('sonk');
  art2.classList.remove('orgfe');
  arttext.classList.remove('hertbrek');
  arttext2.classList.remove('anner');
}

<div class="facecorn1">
  <h1></h1>
  <div id="facebutt1" class="facebutt1"></div>
  <button id="fbutn1" class='fbutn1' disabled="disabled" style="width: 85px;
                            height: 105px;
                            position: fixed;
                            bottom: 135px;
                            left: 615px;
                            opacity: 0%;" onmouseover="playface()" onmouseout="stopface()">
                </button>


</div>

这里发生的情况是我正在使用的常见设置。鼠标进入按钮并播放一些内容，但离开按钮会以我喜欢的笨拙方式停止一切。

您会注意到该按钮已被禁用。在登陆此页面之前单击另一个按钮将启用该按钮。但是，当我第一次打开网站时，此功能以及所有其他类似功能的行为就像该按钮未禁用一样。几个月来一直运行良好。

我打开错误终端。我的 addevent 监听器到处都有类型错误。从来没有遇到过这个问题，但公平。所以，我确实解决了这个问题，但它仍然混乱并忽略了禁用的属性，属性？？？

如果有人怀疑我的类型错误修复，我只需将其更改为：

*buttonid*.addEventListener('*mouseover/out*', (*eventname*);

由于有两个函数，我尝试使用相同的事件名称仍然有问题。然后我为每个名称使用了不同的名称，只需在末尾分别添加 a 或 b，但它仍然不起作用。

我修复了所有类型错误，但问题仍然存在。我不知道这是否是一个错误。我几个月来都无法理解它是如何工作的，我是在 2021 年开始研究这个问题时才说的，然后突然“抱歉，伙计，你的代码都是愚蠢的天啊”。我正在使用像 AGH 这样的教程！！！

Answer 1

是的，鼠标悬停和鼠标移出事件仍然会在禁用的按钮上触发。单击、鼠标按下和鼠标松开则不会。

document.getElementById("foo").addEventListener("mouseover", function() {
  console.log("mouseover");
});

document.getElementById("foo").addEventListener("mouseout", function() {
  console.log("mouseout");
});

document.getElementById("foo").addEventListener("click", function() {
  console.log("click");
});

document.getElementById("foo").addEventListener("mousedown", function() {
  console.log("mousedown");
});

document.getElementById("foo").addEventListener("mouseup", function() {
  console.log("mouseup");
});

<button id="foo" disabled>
Click me
</button>