jQuery dragenter evento se activa en cada hijo

Question

He enlazado el evento dragenter en un objeto que contiene algunos elementos secundarios.

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

Cuando me muevo con un archivo arrastrado alrededor de ellos, este evento se dispara repetidamente. Lo que esperaba es disparar dragenter solo cuando ingrese el elemento #container, no todos los niños también.

¿Es correcto el comportamiento? ¿Cómo puedo prevenirlo?

Answer 1

se puede comprobar si el elemento que desencadenó el evento es el contenedor:

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

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

O si usted no tiene que utilizar la delegación evento:

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

Answer 2

intenta agregar stopPropagation

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

Answer 3

Mi respuesta a esta pregunta es utilizar event capturing en lugar de ev ent burbujeando.

En pocas palabras, se llama a la captura de eventos "por goteo" desde el elemento externo, hasta el elemento de origen o hasta e.stopPropagation().

El evento burbujeo burbujas eventos desde el elemento de origen hasta padres hasta que llega al documento o se detiene con e.stopPropagation().

Por lo tanto, para aplicar al arrastre, desea que el div externo controle el evento, aunque en realidad es el div interno el que está generando el evento.

Al utilizar la captura de eventos, el ondragenter se dispara en la div exterior antes que en el div interno. En el controlador de eventos div externo, llame a e.stopPropagation. Por lo tanto, el controlador de eventos div interno nunca se ejecuta realmente.

This es cómo utilizar jQuery para capturar el evento:

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

Nota del último parámetro.