为什么我们不能将函数绑定到 :disabled 输入字段？

Question

当我尝试将 JavaScript/jQuery .hover 或 .click 函数绑定到 :disabled input 字段时，没有任何函数被触发。

请参阅下面的 sn-p。

$(document).ready(function() {
  var button_1 = $("#button_1");
  
  button_1.hover( function() {
    console.log("Hover event button 1");
  });
  button_1.click( function() {
    console.log("Click event button 1");
  });
});

function button_2_click() {
  console.log("Click even button 3");
}
function button_2_hover() {
  console.log("Hover even button 3");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Hover over one of the buttons, and you'll see none of the console messages gets logged. When removing the `disabled` property, all events are fired.</p>
<button id="button_1" disabled>Disabled 1</button>
<button id="button_2" onmouseover="button_2_hover();" onclick="button_2_click();" disabled>Disabled 2</button>

MDN 关于disabled 属性的说法如下：

指示元素是否被禁用。如果这个属性是 设置为 true 元素被禁用。禁用元素通常是 用灰色文本绘制。如果元素被禁用，它不会 响应用户操作，无法聚焦，命令事件 不会开火。

我试图归档的是，当用户 :hover 超过 button:disabled 时，将显示一条消息。

我知道我可以为此使用title="text"。然而，事实并非如此。我在右上角使用一个带有消息的小弹出窗口。消息存储在javascript object 中。

我的问题：
我该如何解决这个问题？还是不能将.hover() 或onmousemove 函数绑定到disabled input 字段？

Answer 1

click 部分是per specification：

禁用的表单控件必须防止在用户交互任务源上排队的任何 click 事件在元素上分派。

您正在测试的用户代理似乎更进一步，并且还阻止了与悬停相关的事件（例如，Chrome 和 IE 似乎）。其他用户代理可能不会（例如，Firefox 允许与悬停相关的事件。）

如果您想要这些事件，您可以让按钮保持启用状态，然后将它们设置为禁用状态，并防止单击它们执行其他操作，尽管这可能会造成混乱的用户体验。

或者，您可以将span inside 放在button 中，然后将事件挂钩：

$(document).ready(function() {
  var button_1 = $("#button_1 span");
  
  button_1.hover( function() {
    console.log("Hover event button 1");
  });
  button_1.click( function() {
    console.log("Click event button 1");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Hover over one of the buttons, and you'll see none of the console messages gets logged. When removing the `disabled` property, all events are fired.</p>
<button id="button_1" disabled><span>Disabled 1</span></button>

按钮的某些部分不会触发事件（环绕的位），尽管您可以使用 CSS 修复它...