jQuery dragenter Ereignis wird auf jedes Kind gefeuert

Question

Ich habe dragenter Ereignis auf ein Objekt gebunden, das einige Kinder enthält.

Wenn ich mit gezogener Datei um sie herum bewege, wird dieses Ereignis wiederholt ausgelöst. Was ich erwartet habe, feuert dragenter nur bei der Eingabe #container Element, nicht jedes Kind auch.

Ist es richtiges Verhalten? Wie kann ich das verhindern?

Answer 1

Sie können testen, ob das Element, das das Ereignis ausgelöst hat ist der Container hinzuzufügen:

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

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

Oder wenn Sie müssen keine Veranstaltung Delegation verwenden:

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

Answer 2

try stopPropagation

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

Answer 3

Meine Antwort auf diese Frage ist event capturing statt ev zu verwenden ent sprudelnd.

Kurz gesagt, Ereigniserfassung "tröpfelt" vom äußeren Element, zum Quellelement oder bis e.stopPropagation() aufgerufen wird.

Ereignis Sprudeln Blasen Ereignisse aus dem Quellelement über Eltern, bis es das Dokument erreicht oder mit e.stopPropagation() gestoppt wird.

Also, um das Ziehen zu übernehmen, möchten Sie, dass das äußere div das Ereignis behandelt, obwohl es tatsächlich das innere div ist, das das Ereignis generiert.

Mit Event Capturing wird der Ondragenter im Outer Div vor dem inneren Div ausgelöst. Im Ereignishandler outer div rufen Sie e.stopPropagation auf. Der innere div-Ereignishandler wird also nie ausgeführt.

This ist, wie jQuery zu verwenden, um das Ereignis zu erfassen:

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

Hinweis der letzte Parameter.