'HOVER' ASSIGNED VIA LIVE() OR DELEGATE() CONFUSES THE MOUSEENTER EVENT WITH MOUSEOVER WHEN TRIGGERED MANUALLY

[patrickwhalen]

(All reference to mouseenter/mouseover can likewise be applied to mouseleave/mouseout.)

New bug introduced into jQuery 1.4.3.

When assigning hover via .delegate() or .live(), if you position your mouse pointer over the element, it now receives a mouseenter.

That's fine.

The trouble is that now nothing happens when manually triggering the mouseenter.

Yet when manually triggering mouseover, it triggers the mouseenter event.

Example: ​http://jsfiddle.net/RuXEL/

<div>
    <span>I'm a SPAN</span>
</div>

<a href='#' id='triggerME'>Click to manually trigger MOUSEENTER</a>
<a href='#' id='triggerMO'>Click to manually trigger MOUSEOVER</a>

$('div').delegate('span', 'hover', function(e) {
    $(this).toggleClass('hilite', e.type === 'mouseenter');
    $('body').append('<br>SPAN received: ' + e.type);
});

$('#triggerME').click(function(e) {   // Nothing happens
    $('span').trigger('mouseenter'); 
    e.preventDefault();
});

$('#triggerMO').click(function(e) {  // Triggers a mouseenter instead of mouseover
    $('span').trigger('mouseover');
    e.preventDefault();
});​

This issue manifest itself in a project where previously a hover assigned via .delegate() on one element would receive a mouseover, which it then fired on a related element that also had a hover assigned via .delegate().

Because the event.type received via the mouse pointer on the primary element could be used to trigger the same event on the related element, it would work.

But now that the primary element receives a mouseenter, but triggering mouseenter no longer has any effect, the code is broken.

The temporary fix was when a mouseenter was received by the primary, it would instead trigger a mouseover on the related element, which will then receive its mouseenter.

e.type = (e.type === 'mouseenter') ? 'mouseover' : 
         (e.type === 'mouseleave') ? "mouseout" : e.type;
$relatedElem.trigger( e.type );

[snover]

mouseenter does not bubble, so of course you cannot trigger it manually on an element and expect it to bubble up to the delegate handler.

[patrickwhalen]

Replying to snover:

mouseenter does not bubble, so of course you cannot trigger it manually on an element and expect it to bubble up to the delegate handler.

Yes I'm aware, but mouseenter is reported as the event.type that bubbled up to trigger the .delegate() handler. As such, it would seem that the same should be available to manually trigger it.

Additionally it seems to add confusion when a manually triggered mouseover is reported as a mouseenter.

My understanding is that jQuery manually bubbles its events. Perhaps I'm mistaken about that, but if it is the case, then there can be no expectation for how an event does/does not bubble since it is not determined by the natural characteristics of the event type.

These are just my opinions. No need to reply. I'll be content with my workaround. :o)