JQuery dragenter event fires for every child

Question

I attached an event dragenterto an object containing some child elements.

$(document).on('dragenter', '#container', function(e) {
  console.log('dragenter');
});

When I move with a moved file around them, this event fires repeatedly. What I expected dragenteronly works when I enter an item #container, not for every child.

Is this the right behavior? How can I prevent this?

Answer 1

You can check if the element that raised the event is a container:

var container = $('#container').get(0);

$(document).on('dragenter', '#container', function(event) {
  if(event.target === container) {
      console.log('dragenter');
  }
});

Or, if you do not need to use event delegation:

$('#container').on('dragenter', function(event) {
    if(event.target === this) {
        console.log('dragenter');
    }  
});

Answer 2

try adding stopPropagation

$(document).on('dragenter', '#container', function(e) {
  e.stopPropagation();
  console.log('dragenter');
});

Answer 3

- .

, , "" , , e.stopPropagation().

, , e.stopPropagation().

, drag enter, , div , div, .

ondragenter Div div. outter div e.stopPropagation. , div .

, jquery :

$("#outerDiv").get(0).addEventListener("ondragenter", function(e){e.stopPropagation()}, true);

.