jQuery dragenter olayı her çocuğa işlenir

Question

Bazı çocukları içeren bir nesneye dragenter olayım bağlı.

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

Ben çevrelerindeki sürüklenen dosya ile hareket

, bu olay defalarca ateş ediyor. Beklediğim şey sadece #container elemanını girerken, her çocuğa değil dragenter'u ateşlemektir.

Doğru davranış mı? Bunu nasıl önleyebilirim?

Answer 1

Sen olayı tetikleyen unsur konteyner olup olmadığını test edebilirsiniz stopPropagation eklemek için:

:

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

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

Yoksa olay heyeti kullanmak yoksa

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

Answer 2

deneyin

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

Answer 3

Bu soruya cevabım, ev yerine event capturing kullanmaktır. kabarcıklanma. Özetle, dış öğeden kaynak öğeye veya e.stopPropagation() numaralı duruma kadar "damlatılır" yakalama olayı bir olayda çağrılır.

Olay köpüren olayları, kaynak öğeden ana belgeye kadar belgeye ulaşana kadar kabarcıkları veya e.stopPropagation() ile durdurulur.

Bu nedenle, sürükleme girişine uygulamak için, aslında olayı oluşturan iç div olsa bile, dış divun olayı ele almasını istersiniz.

Olay yakalamayı kullanmak, iç divtan önce Outer Div'da ondergenter yangını yapar. Outter div olay işleyicisinde, e.stopPropagation'ı çağırırsınız. Yani iç div olay işleyicisi aslında hiç çalışmaz.

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

Not son parametre:

This olayı yakalamak için jquery kullanmak nasıl.