禁用按钮的mouseover与mouseout事件仍触发？技术求助

核心问题原因 #

• 内联事件不受disabled约束：你在HTML按钮上直接写了onmouseover="playface()"和onmouseout="stopface()"，这类内联事件不会被按钮的disabled属性阻断，哪怕按钮处于禁用状态，鼠标事件依然会触发。
• 之前的TypeError根源：你最初的代码里错误地给playface函数绑定事件（playface.addEventListener(...)），但playface是函数而非DOM元素，这才导致控制台的类型错误。
• 透明按钮仍接收鼠标事件：按钮设置了opacity: 0%，但它只是视觉透明，依然会占据页面空间并接收鼠标事件，这也是事件能触发的原因之一。

修复步骤 #

1. 移除HTML内联事件，统一用JS绑定

先把按钮的内联事件属性删掉：

<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%;">
  </button>
</div>

2. 正确获取按钮元素并绑定事件，添加禁用判断

修改JS代码，先获取按钮DOM元素，再绑定事件，同时在事件处理函数开头判断按钮是否禁用，若禁用则直接终止执行：

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');
// 获取按钮元素
const fbutn1 = document.getElementById('fbutn1');

// 绑定mouseover事件
fbutn1.addEventListener('mouseover', function(e) {
  // 判断按钮是否禁用，禁用则直接返回
  if (this.disabled) return;
  playface();
});

// 绑定mouseout事件
fbutn1.addEventListener('mouseout', function(e) {
  if (this.disabled) return;
  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');
}

3. 可选：禁用/启用按钮时动态添加/移除事件监听器

如果不想在事件里判断，也可以在按钮状态切换时，动态绑定或移除事件：

// 启用按钮时绑定事件
function enableButton() {
  fbutn1.disabled = false;
  fbutn1.addEventListener('mouseover', playface);
  fbutn1.addEventListener('mouseout', stopface);
}

// 禁用按钮时移除事件
function disableButton() {
  fbutn1.disabled = true;
  fbutn1.removeEventListener('mouseover', playface);
  fbutn1.removeEventListener('mouseout', stopface);
}

// 页面初始化时禁用按钮并移除事件
disableButton();

额外提示 #

如果按钮只是用来触发动画，不需要作为表单控件，也可以考虑用div替代按钮，通过添加/移除自定义类来控制是否响应鼠标事件，配合CSS的pointer-events: none来禁用鼠标交互，这样更灵活。

内容的提问来源于stack exchange，提问作者demontheif