Cannot detect mouse position over a disabled field in Firefox

[jason_lau@…]

Seems I can't detect the mouseX or mouseY while over a disabled form field. Works in IE, but not Firefox. ​Example

[jitter]

This isn't a jQuery bug IMO.

It works in IE and Opera but doesn't in Firefox and Chrome (so I guess it also won't work in Safari).

Without digging too deep I found this oooold ​bug report for FF. But from the looks of it this will never ever be fixed.

So it seems like you hit a specific behavior which varies between browsers. FF and Chrome don't accept/generate/pass-on any mouse-events when over a disabled element. While Opera and IE do.

---

In case you really depend on this specific code working crossbrowser:

This bug in FF also was a problem for the developer of Firebug (Firebug relies on mouse-events to know which element you want to inspect). They solved it by putting a proxy-div-overlays over the disabled elements. ​Firebug bug report and ​solution (css + js)

---

In case the original link becomes unavailable sometime I ported the ​test case to jsfiddle

[snover]

Unfortunately, there really isn’t anything that jQuery can do about this. Not even using capturing works; both Firefox and WebKit just suck it into a big black hole of nothingness.

[jason_lau@…]

Replying to snover:

Unfortunately, there really isn’t anything that jQuery can do about this. Not even using capturing works; both Firefox and WebKit just suck it into a big black hole of nothingness.

I made a workaround that I think works in all browsers. If you would like to see - ​http://jsfiddle.net/Jason/Hg2SK/7/

[jitter]

Replying to jason_lau@…:

I made a workaround that I think works in all browsers. If you would like to see - ​http://jsfiddle.net/Jason/Hg2SK/7/

Excatly what I was talking about. A similar thing was done by the developer of Firebug. This works for me in FF and Chrome.

[Rick Waldron]

I'm changing this to an "enhancement" that is up for review.

[jitter]

Replying to rwaldron:

I'm changing this to an "enhancement" that is up for review.

Hmm, I don't think this should become an enhancement to the jQuery Core.

The proxy divs work well enough if you really need this. But I feel this to be too intrusive to include it in general. A jQuery plugin IMO is the right way to handle this.

---

Also this only works if you want to catch the event high up in the DOM tree (document, body, html). It doesn't solve the problem of binding an event directly to the disabled element e.g. $("input:disabled").bind("mousemove", function() { ... }) won't work. For this the proxy divs would need to trigger the event-handler bound to the disabled element.

[Rick Waldron]

My reasoning is that jQuery does provide cross-browser normalization for unexpected incompatibilities. I think this particular one should at least be discussed - if it is dismissed outright, that is certainly fine as well.

[Rick Waldron]

#7379 is a duplicate of this ticket.

[Rick Waldron]

#7379 is More evidence to support the discussion of adding workaround support for this issue.

[jason_lau@…]

I made a plugin for it. ​http://plugins.jquery.com/project/detectmouseoverdisabled or ​http://jasonlau.biz/home/jquery/detect-mouse-over-disabled-a-jquery-plugin

[jason_lau@…]

To eliminate cross-browser behavior inconsistencies, I added a client-side-generated transparent gif to the overlay. For example, Internet Explorer could not detect a click on a disabled field, but Firefox could. The transparent image (1px x 1px scaled to 100% x 100%) filled the void of the empty container, I suppose. It's been tested in all browsers. ​http://jasonlau.biz/jquery.detectmouseoverdisabled/

[dmethvin]

A plugin seems like a great way to fix this, thanks jason_lau!

[Rick Waldron]

@dmethvin +1!

@jason_lau - how about putting your work up on github :D

[anonymous]

@ rwaldron Done. Thanks for the suggestion. jasonlau at github.com

[jitter]

​https://github.com/jasonlau/jQuery-Detect-Mouse-Over-Disabled