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

Question

当我尝试绑定JavaScript / jQuery .hover或.click功能到:disabled input字段，没有的功能被炒鱿鱼。

请参见下面的代码段。

 $(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部分是根据规格 ：

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

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

如果需要这些事件，可以使按钮处于启用状态，然后将其设置为禁用状态，并防止单击它们以其他方式进行操作，尽管这可能会使用户感到困惑。

或者，你可以把一个span 内 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来解决此问题...