`dragenter` and `dragleave` events in parent DOM element conflict with nested DOM elements

Having this nested DOM elements:

<div id="drop">
  <div>drop here</div>
</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