Why can't we bind functions to :disabled input fields?

Question

When i try to bind JavaScript / jQuery .hover or .click functions to an :disabled input field, none of the functions gets fired.

See the snippet below.

 $(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 says the following about the disabled property:

Indicates whether the element is disabled or not. If this attribute is set to true the element is disabled. Disabled elements are usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.

What i tried to archieve is, when a user :hover 's over an button:disabled , a message would be shown.

I know i could use a title="text" for that. However, thats not the case. I use an small popup at the right top corner with an message. The message is stored inside an javascript object .

My question:
How can i make an workaroud for this? Or is it just not possible to bind .hover() or onmousemove functions the disabled input fields?

Answer 1

The click part is per specification :

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

It would appear that the user agents you're testing in take it further and also prevent the events related to hovering (Chrome and IE seem to, for instance). Other user agents may not (Firefox allows the events related to hover, for instance.)

If you want those events, you could leave the buttons enabled and then style them to look disabled and prevent clicking them doing what they otherwise do, although it may make for a confusing user experience.

Alternately, you could put a span inside the button , and hook the events on that:

 $(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> 

There are parts of the button that won't trigger the events (bits of the surround), though you could probably fix that with CSS...