Search code examples
jqueryinternet-explorereventsmouseenterdomready

Can mouseenter be made to not fire in IE on DOMready?


jQuery emulates IE's mouseenter event on non-IE browsers. In IE, however, mouseenter is being triggered when the page loads (maybe due to jQuery's use of doScroll in the $.ready implementation), even if the mouse is not moved at all.

This doesn't happen in other browsers and definitely doesn't follow Microsoft's own spec, which says (emphasis mine):

The event fires only if the mouse pointer is outside the boundaries of the object and the user moves the mouse pointer inside the boundaries of the object. If the mouse pointer is currently inside the boundaries of the object, for the event to fire, the user must move the mouse pointer outside the boundaries of the object and then back inside the boundaries of the object.

This only becomes an issue of usability if hover (or the hoverIntent plugin) is applied to a navigational item to display a drop down or "mega-menu": In IE, mouseenter will fire immediately after $.ready, obscuring the content with the menu.


Solution

  • I found one working solution: Do the binding in a later thread:

    jQuery(function ($) {
        setTimeout(function () {
            /* bind with hoverIntent */
        }, 0);
    });
    

    In the past this has fixed so many IE problems for me (form elements not being ready) that jQuery should bake it in to $.ready.