क्लिक अनदेखी करने के लिए कैसे घटना जब बच्चों

Question

पर क्लिक किया

तो मैं इस परिदृश्य है:

<div id="block"> 
Sample text. 
<a href="#">Anchor link</a> 
</div> 

<script type="text/javascript"> 
    $("#block").click(function() { alert('test'); }); 
</script> 

जब मैं div के अंदर कहीं भी क्लिक करें, मैं 'परीक्षण' अलर्ट हो रही है। लेकिन, जब मैं "एंकर लिंक" पर क्लिक करता हूं, तो मैं इसे तब से रोकना चाहता हूं। मैं इसे कैसे कार्यान्वित कर सकता हूं?

धन्यवाद

Answer 1

आप एक अतिरिक्त हैंडलर के साथ लिंक से खलबली मचाने वाले, इस तरह से प्राप्त क्लिक रोक सकता बुलबुले से लिंक (ठीक है, वास्तव में नहीं, लेकिन उनके हैंडलर निष्पादन से), लेकिन प्रत्येक तत्व के लिए हैंडलर नहीं बनाते हैं, यह .stopImmediatePropagation() के माध्यम से किया जाता है।

<div id="container"> 
    <form> 
     <div class="field"> 
      <input id="demo" type="text" name="demo" /> 
     </div> 
     <div class="field"> 
      <input id="demo2" type="text" name="demo2" /> 
     </div> 
    </form> 
</div> 

कोड इस तरह दिखता है:

$(document).ready(function() { 
    $('#container').click(function(evt) { 
     if(this == evt.target) { 
      console.log('clicked container',evt.target); 
      $('#demo').focus(); 
     } else { 
      console.log('clicked child -> ignoring'); 
     } 
    }); 

    $('.field').click(function(evt) { 
     if(this == evt.target) { 
      console.log('clicked field div',evt.target); 
      $(this).find('input').focus(); 
     } else { 
      console.log('clicked child -> ignoring'); 
     } 
    }); 
}); 

आप कंटेनर उस रूप में शामिल क्लिक कर सकते हैं

Answer 2

यह तुम क्या जरूरत है: http://api.jquery.com/event.target/।

बस यह जांचने के लिए तुलना करें कि तत्व तत्व या आपके बच्चों में से एक द्वारा ट्रिगर किया गया था या नहीं।

Answer 3

परीक्षण कर सकते हैं जो नोड घटना वस्तु की target संपत्ति के साथ क्लिक किया गया था:

$("#block").click(function(event) { 
    if(event.target.nodeName != 'A') { 
     alert('test'); 
    } 
}); 

मैं Event Properties from quirksmode.org पढ़ने के लिए सुझाव देते हैं।

$("#block a").click(function(e) { e.stopPropagation(); }); 

विकल्प हम टिप्पणी में चर्चा कर रहे थे:

$("#block").delegate('a', 'click', function(e){ e.stopImmediatePropagation(); }) 
      .click(function() { alert('test'); });​ 

यह रोका जा सके किसी भी बच्चे

Answer 4

$("#block").click(function(event) { 
    if($(event.target).attr('id') == $(this).attr('id')) 
    { 
     alert('test'); 
    } 
}); 

Answer 5

यहाँ एक डेमो (jsfiddle) एक फ़ॉर्म और दो क्षेत्रों के साथ है पहले इनपुट फ़ील्ड पर या इनपुट फ़ील्ड के पीछे फोकस सेट करने के लिए फोकस सेट करने के लिए।

यदि आप फ़ील्ड में क्लिक करते हैं, तो क्लिक को अनदेखा कर दिया जाएगा।

कोड ऊपर काम करता है के बाद से jQuery ईवेंट हैंडलर्स कॉल करने से पहले this को डोम नोड प्रदान करती है, ताकि आप आसानी से जाँच

this == evt.target 

सीएसएस द्वारा जांच सकते हैं कि वर्तमान घटना डोम नोड द्वारा प्रकाशित किया गया था:

#container { 
    width: 600px; 
    height: 600px; 
    background: blue; 
} 

.field { 
    background: green; 
}