jQuery ड्रैगेंटर ईवेंट प्रत्येक बच्चे

Question

पर निकाल दिया गया है, मैंने किसी ऑब्जेक्ट पर dragenter ईवेंट बाध्य किया है जिसमें कुछ बच्चे हैं।

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

जब मैं उनके चारों ओर खींची गई फ़ाइल के साथ चलता हूं, तो यह घटना बार-बार गोलीबारी कर रही है। मैंने जो उम्मीद की है वह dragenter को केवल #container तत्व दर्ज करते समय, हर बच्चे को भी फायरिंग नहीं कर रहा है।

क्या यह उचित व्यवहार है? मैं यह कैसे रोक सकता हूँ?

Answer 1

परीक्षण कर सकते हैं कि क्या तत्व तो ईवेंट को ट्रिगर कंटेनर है:

:

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

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

या आप घटना प्रतिनिधिमंडल उपयोग करने के लिए नहीं है, तो

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

Answer 2

कोशिश stopPropagation जोड़ने के लिए

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

Answer 3

इस प्रश्न का मेरा उत्तर event capturing का उपयोग करने के बजाय ent bubbling।

संक्षेप में, बाहरी तत्व से, स्रोत तत्व पर या e.stopPropagation() तक ईवेंट कैप्चरिंग "ट्रिकल्स डाउन" कहा जाता है।

घटना बुलबुले बुलबुले स्रोत तत्व से तब तक माता-पिता के माध्यम से घटनाओं तक पहुंचते हैं जब तक यह दस्तावेज़ तक नहीं पहुंचता है या e.stopPropagation() के साथ बंद कर दिया जाता है।

तो, ड्रैग एंटर पर लागू करने के लिए, आप बाहरी div को घटना को संभालने के लिए चाहते हैं, भले ही यह वास्तव में आंतरिक div है जो घटना उत्पन्न कर रहा हो।

घटना कैप्चरिंग का उपयोग बाहरी div से पहले बाहरी div में ऑनडैगेंटर आग बनाते हैं। बाहरी div ईवेंट हैंडलर में, आप e.stopPropagation को कॉल करते हैं। तो आंतरिक div घटना हैंडलर वास्तव में कभी नहीं चलता है।

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

नोट पिछले पैरामीटर:

This कैसे jQuery का उपयोग करने के घटना पर कब्जा करने की है।