Bug 66547 - dragleave event does not include relatedTarget in the event object
Summary: dragleave event does not include relatedTarget in the event object
Alias: None
Product: WebKit
Classification: Unclassified
Component: UI Events (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL: http://jsfiddle.net/pimvdb/HU6Mk/8/
Depends on:
Reported: 2011-08-19 04:59 PDT by pimvdb
Modified: 2019-02-27 09:54 PST (History)
16 users (show)

See Also:

Test case (768 bytes, text/html)
2011-08-19 04:59 PDT, pimvdb
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description pimvdb 2011-08-19 04:59:19 PDT
Created attachment 104491 [details]
Test case


 - a drag element
 - a drop target element, which has a child element
 - drop target element has a 'dragleave' event bound which uses e.relatedTarget


In the event handler for 'dragleave', 'e.relatedTarget' is null. This is unfortunate, because when dragging inside the drop target element from the parent into the child, 'e.relatedTarget' is not the parent element. As a result, it is impossible to determine whether the dragging is still happening inside the parent element or that the mouse dragged outside the parent element.

This property is available on Firefox and should be available as said in the specification:

Comment 1 pimvdb 2011-08-20 04:26:07 PDT
I did a quick research and it looks like that 'relatedTarget' is indeed not passed.


The penultimate argument which is passed to MouseEvent::create (which corresponds to the 'relatedTarget' parameter) is '0' and is probably therefore 'null' in JavaScript.
Comment 2 Dipish 2011-11-17 02:57:33 PST
I confirm the behaviour (tested in Chrome 15.0.874.121).
Comment 3 Andreas Blixt 2012-01-02 09:35:25 PST
I can reproduce this on "AppleWebKit/535.8 Chrome/17.0.944.0" and "AppleWebKit/535.7 Chrome/16.0.912.63".

Due to the lack of relatedTarget, I have not found a feasible workaround for doing consistent effects based on dragenter/dragleave, beyond keeping extra state outside of the events that keeps track of whether any dragenter events have been triggered on child element.
Comment 4 Mark Holmquist 2012-05-22 15:37:38 PDT
I can confirm this happening with Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Ubuntu/12.04 Chromium/18.0.1025.151 Chrome/18.0.1025.151 Safari/535.19

It would be awesome if someone could implement this, instead of leaving drag events broken, because it really makes things difficult.
Comment 5 Fernando Guillen 2012-08-21 14:01:55 PDT
Same issue here:

Having this nested DOM elements:

<div id="drop">
  <div>drop here</div>

I want to capture dragenter and dragleave in the whole #drop element so I can play with its CSS:

$("#drop").on( "dragenter", function() {
  $("#drop").addClass( "dragOver" );

$("#drop").on( "dragleave", function() {
  $("#drop").removeClass( "dragOver" );

The problem is that when I'm dragging over this element and my mouse arrives to the nested element the dragleave event is triggered so I lost my CSS behavior.

This behavior is completely non-consistent with other events like mouesenter and mouseleave which work properly with nested elements.

Another non-consistent behavior is that if I move out of the nested element again the dragenter event is not triggered, and I have to leave completely the outer element and go again into it so the dragenter event is triggered.

Check the jsFiddle example:  http://jsfiddle.net/fguillen/473kH/ in this example you can play with the normal mouse events and check their behavior in comparison with the drag events.

StackOverflow thread:  http://stackoverflow.com/questions/10867506/dragleave-of-parent-element-fires-when-dragging-over-children-elements

Failing in:

Chrome OSX
Firefox OSX
Safari OSX
Comment 6 Fernando Guillen 2012-08-21 14:02:28 PDT
Another StackOverflow thread:  http://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element
Comment 7 caqittepp-549 2012-10-18 15:22:55 PDT
This is fixed in Firefox with either relatedTarget or dragexit.
Either would be welcome since it's now a year later and still not possible to do drag and drop without hacks in the world's most advanced and most used browser.
Comment 8 Robert Kieffer 2013-10-09 05:59:52 PDT
Chrome version of this bug: https://code.google.com/p/chromium/issues/detail?id=159534
Mozilla bug where this issue was fixed in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=458613

Mozilla's support for the relatedTarget attribute solves this problem, and makes sense given how the mechanics of mouseover/mouseout events are identical to dragenter/dragleave events.  It'd be awesome if we could have consistent support for this across browsers.  This is definitely a thorn in the side of developers want to implement dropzone effects on all but the simplest DOM structures.
Comment 9 sunpietro 2018-11-15 07:18:57 PST
I have found this issue in Safari 12.0.1 (13606. Seems like it's still not fixed.

Here's the updated fiddle (I've forked the one mentioned earlier and updated it a bit) http://jsfiddle.net/7tfm5eL1/
Comment 10 Michael Puckett 2019-02-27 09:54:00 PST
This has been fixed in Chrome


I believe this means the bug now exists only Safari.