Bug Tracker

Ticket #4469 (closed bug: worksforme)

Opened 6 years ago

Last modified 3 years ago

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:
Blocking: Blocked by:

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

jquery_ff_scrollbar_hover.rar Download (19.6 KB) - added by bfg 5 years ago.

Change History

comment:1 Changed 5 years ago by bfg

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

Changed 5 years ago by bfg

comment:2 Changed 5 years ago by 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 );
  }
};

comment:3 Changed 5 years ago by thorn

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

comment:4 Changed 5 years ago by pkh80

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 4 years ago by dmethvin

  • Component changed from unfiled to event

comment:6 Changed 4 years ago by snover

  • Status changed from new to closed
  • Resolution set to worksforme

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

comment:7 Changed 4 years ago by snover

#5631 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.