#4469 closed bug (worksforme)
Event: hover does not trigger properly when scroll bars are present
Reported by: | sairex | Owned by: | |
---|---|---|---|
Priority: | major | Milestone: | 1.4 |
Component: | event | Version: | 1.3.2 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
Hover does not properly trigger on/off when its parent container has an overflow: scroll/auto property set to it.
For example: http://docs.jquery.com/Events/hover
Modify the example so that the UL has the CSS property overflow: auto; height: 30px;
Now go over each LI element back and forth over the scrollbar. The LI hover event will not trigger, only the UL hover event triggers.
Attachments (1)
Change History (8)
comment:1 Changed 13 years ago by
Changed 13 years ago by
Attachment: | jquery_ff_scrollbar_hover.rar added |
---|
comment:2 Changed 13 years ago by
I ran into the same problem:
- set up a mouse event-handler for a div with 'overflow:scroll'
- mouse over the scrollbar (I'm on Firefox 3.0.14, Fedora 10, x86_64)
- Firefox throws a 'permission denied to XULElement.parentNode' error
- remaining code is not executed
The main issue seems to be that the scrollbar widget (scrollbar + scroll-up/down buttons) are of native XULElement-type in Firefox, and trying to access a property of an object of this type is a no-no (even inside a try-catch block, it seems).
Thanks to the ExtJS-folks though (thanks Condor and mystic), there's a work-around (see http://www.yui-ext.com/forum/showthread.php?p=366482), which fixes the described problem behavior (for me at least).
Here's the verbose code (old code commented out, alternate code w/ original comments inlined):
var withinElement = function(event) { // Check if mouse(over|out) are still within the same parent element var parent = event.relatedTarget; // Traverse up the tree while ( parent && parent != this ) /* // permission denied error if 'parent' is of XULElement-type (which // will happen when mousing over the scrollbar-widget in FF) try { parent = parent.parentNode; } */ // alternate solution: try { // Prevent "Permission denied to get property XXX"-type // errors in Firefox when mousing over // 1) XULElements (e.g. scrollbars, scrollbar buttons etc) // 2) anonymous <DIV>s (i.e. <div class="anonymous-div">) contained in // <INPUT> elements // See https://bugzilla.mozilla.org/show_bug.cgi?id=208427 for more info // tested successfully on: // -- Fx 2.0.0.20 + FB 1.3.1 // -- Fx 3.0.12 / 3.5.1 + FB 1.4.1 // -- Fx 3.0.14 (Fedora 10, 2.6.27.30-170.2.82.fc10.x86_64) + FB 1.4.2 var s = HTMLElement.prototype.toString.call(parent); if (s == '[xpconnect wrapped native prototype]' || // FF 3.5 check s == '[object XULElement]') { // FF < 3.5 check return; } parent = parent.parentNode; } catch(e) { parent = this; } if( parent != this ){ // set the correct event type event.type = event.data; // handle event if we actually just moused on to a non sub-element jQuery.event.handle.apply( this, arguments ); } };
comment:3 Changed 13 years ago by
emparq, thanks for mentioning this workaround. But it didn't work for me until I replaced 'return' with 'break'.
comment:4 Changed 12 years ago by
Does applying this workaround require using the non-minified version of jquery? Can someone post a brief explanation of using the patch?
Thanks!
comment:5 Changed 12 years ago by
Component: | unfiled → event |
---|
comment:6 Changed 12 years ago by
Resolution: | → worksforme |
---|---|
Status: | new → closed |
This doesn’t appear to be an issue in current versions of Firefox + jQuery; please reopen if this is not the case.
It seems to be only Firefox bug, confirmed jQuery 1.2.6+