Html5 DND and Jquery MouseLeave Event not firing

Question

I've experienced a weird issue with browsers and I am not sure how to properly fixed it. Using jquery's mouseleave event on an outer div let's me catch the event when the pointer leaves the div without firing for any children. Works great, however, adding a draggable inner div and dragging it outside does result in strange behaviors:

Latest Chrome: Not firing mouseleave when leaving, even not after releasing the mouse
Firefox: Not firing mouseleave when leaving, after releasing mouse outside and move it properly fires the event

What I'd actually need is to get the mouseleave event as soon as the mouse leaves the container, no matter whether I am dragging or not.

Here's the relevant jquery code used for testing:

$('#outer')
    .on('mouseenter', function () {
    $('label').text('MOUSE ENTERED');
})
    .on('mouseleave', function () {
    $('label').text('MOUSE LEFT');
});

$('#dragger')
    .on('dragstart', function (evt) {
    evt.originalEvent.dataTransfer.effectAllowed = 'move';
    // dummy data as some browser may not drag otherwise
    evt.originalEvent.dataTransfer.setData('text/plain', '');
});

Relevant test case can be seeen here: http://jsfiddle.net/W5dgG/1/

anderswelt anderswelt · Accepted Answer · 2014-06-27T14:54:46

Figured the the answer. As stated on https://developer.mozilla.org/de/docs/DragDrop/Drag_and_Drop:

A number of events are used which are fired during various stages of the drag and drop operation. Note that only drag events are fired; mouse events such as mousemove are not fired during a drag operation.

So, no mousemove event and thus jquery can not fire the mouseleave event. Too bad :(

Html5 DND and Jquery MouseLeave Event not firing

1 Answers