Event: hover does not trigger properly when scroll bars are present

[sairex]

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.

[bfg]

It seems to be only Firefox bug, confirmed jQuery 1.2.6+

[emparq]

I ran into the same problem:

1. set up a mouse event-handler for a div with 'overflow:scroll'
   
2. mouse over the scrollbar (I'm on Firefox 3.0.14, Fedora 10, x86_64)
   
3. Firefox throws a 'permission denied to XULElement.parentNode' error
   
4. 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 );
  }
};

[thorn]

emparq, thanks for mentioning this workaround. But it didn't work for me until I replaced 'return' with 'break'.

[pkh80]

Does applying this workaround require using the non-minified version of jquery? Can someone post a brief explanation of using the patch?

Thanks!

[snover]

This doesn’t appear to be an issue in current versions of Firefox + jQuery; please reopen if this is not the case.

[snover]

#5631 is a duplicate of this ticket.