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?

Ok, but why? If i want an `hover` event on it, how can i do that? — Red, Apr 19 '17 at 12:32
One solutions is to add an event to the element containing the input. — Webbanditten, Apr 19 '17 at 12:33
Seems like you want the buttons to look like their disabled but still accept user actions. If this is the case then you could use a class to define the style you want without disabling user actions — Pineda, Apr 19 '17 at 12:35
MSD document is more specific to Mozila Browser, so if you check it with firefox u can see :hover event in working order. And in solution of your issue you can introduce a parent of button and use its :hover event. — RRajani, Apr 19 '17 at 12:36
possible duplicate: http://stackoverflow.com/questions/18941700/hover-not-working-on-disabled-input-field — Alex Slipknot, Apr 19 '17 at 12:36
@charlietfl Clever awnser, i indeed should do something like that. It didnt even come in my mind. Thanks. — Red, Apr 19 '17 at 12:38
@charlietfl: That's a good idea, but you have to do it the other way around (span *inside* the button), because the button prevents the event being queued, so it doesn't bubble to the span. — T.J. Crowder, Apr 19 '17 at 12:39
@RRajani, simply put, you are wrong. MDN (it's not MSD) is not pertaining to Firefox. In fact, all information pertaining to Firefox is clearly marked as such. MDN is a full fledged database on web standards, containing information on all browsers and particularities/bugs regarding particular properties or methods. I'm not a fan, I don't use Firefox for anything other than testing, but it would be unfair not to acknowledge their effort. — tao, Apr 19 '17 at 12:39
@RRajani: *"MSD document is more specific to Mozila Browse"* No, the vast majority of the content on MDN is cross-platform, most of it backed by standards which MDN cites. Where there's browser-specific behavior (Firefox or otherwise), the content usually points that out. (And it's collaboratively-edited, so any time it doesn't, the community can fix that.) — T.J. Crowder, Apr 19 '17 at 12:40
@Andrei Gheorghiu please check questioned snipet with firefox. — RRajani, Apr 19 '17 at 12:41
@RRajani That goes to show exactly what I said and the opposite of what you said: MDN is not pertaining to Firefox. Firefox doesn't respect the Web standard in this particular case, but MDN lists the standard appropriately. — tao, Apr 19 '17 at 12:50
@RRajani: What Firefox does with this snippet is irrelevant to the scope of MDN. (And appears to demonstrate exactly the opposite of your point.) — T.J. Crowder, Apr 19 '17 at 12:51

T.J. Crowder · Accepted Answer · 2017-04-19T12:43:30.353

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...

Very clever awnser. It didn't even come inside my mind, thanks! :) — Red, Apr 19 '17 at 12:39

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

1 Answers1