2011-05-16 14 views
5

मैं सिर्फ http://api.jquery.com/event.stopPropagation/लाइव इवेंट

पढ़ रहा था .live() विधि के बाद से संबंध जारी करना घटनाओं संभालती है एक बार वे दस्तावेज़ के शीर्ष करने के लिए प्रचारित किया है, यह लाइव के प्रसार को रोकने के लिए संभव नहीं है घटनाएं

मैं इस कथन से थोड़ा उलझन में था, क्या कोई मुझे कुछ उदाहरण के साथ समझा सकता है?

+0

संबंधित प्रश्न (हुड के तहत): http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation –

उत्तर

4

लाइव विधि दस्तावेज़ में एक हैंडलर बांधती है, और यह पहचानती है कि कौन सा तत्व event.target संपत्ति से ईवेंट को ट्रिगर करता है।

तो असली हैंडलर शीर्ष पर है (पदानुक्रम के संदर्भ में)।

stopPropagation डोम पदानुक्रम ऊपर जाने से उत्साह से भरा हुआ बंद हो जाता है, लेकिन जब से हैंडलर पहले से ही (.live मामले में ) शीर्ष पर है वहाँ के लिए बुलबुला करने के लिए कोई ऊपरी जगह .. है


उदाहरण प्रयास ..

- document 
    - div 
    - link 

आप +०१२३९९१६७०१३ साथ लिंक (के लिए क्लिक करें ईवेंट हैंडलर बाँधया click विधि)।

जब आप लिंक पर क्लिक करते हैं, हैंडलर ट्रिगर होता है, लेकिन इसके अलावा क्लिक ईवेंट डॉम तक जाता है जब तक कि यह दस्तावेज़ तक नहीं पहुंच जाता है, और div और दस्तावेज़ से जुड़े क्लिक हैंडलर को ट्रिगर भी करेगा। (जब तक आप .stopPropagation का उपयोग करें)

वैकल्पिक रूप से, अगर आप ईवेंट हैंडलर बाध्य करने के लिए .live विधि का उपयोग करें, यह दस्तावेज़ करने के लिए बाध्य कर दिया जाएगा। यदि अब आप लिंक पर क्लिक करते हैं, तो ईवेंट (जो तुरंत आग नहीं लगेगा, क्योंकि कोई हैंडलर से बंधे नहीं है) स्वाभाविक रूप से डीओएम (क्लिक करेगा जो क्लिक हैंडलर को ट्रिगर करता है)। एक बार यह दस्तावेज़ तक पहुंचने के बाद यह हमारे अपने हैंडलर को ट्रिगर करेगा। लेकिन जाने के लिए कोई ऊपरी नहीं है, इसलिए stopPropagation इस बिंदु पर बेकार है।

2

HTML:

<div id="outer"> 
    <div id="inner"> 
     <span>.live() version</span> 
    </div> 
</div> 

<div id="outer2"> 
    <div id="inner2"> 
     <span>.delegate() version</span> 
    </div> 
</div> 

जे एस:

$(function(){ 

    $('#inner2').delegate('span', 'click', function(e){ 
     e.stopPropagation(); // indeed, no alert! 
    }); 

    $('span').live('click', function(e){ 
     e.stopPropagation(); 
     // we would expect the propagation to stop here, so no alert, right? 
    }); 

    $('#outer2, #outer').click(function(){ alert("Don't reach me!"); }); 

}); 

उदाहरण: http://jsfiddle.net/knr3v/2/

.live() केवल करता है अपना जादू एक बार घटना पहले से ही bubbled है, इसलिए प्रचार से घटना को रोकने बेकार है - यह बहुत देर हो चुकी है, यह पहले से ही पेड़ के शीर्ष तक पहुंच चुकी है और प्रचारित है ...

संबंधित मुद्दे