div पर क्लिक ईवेंट को असाइन करना, लेकिन इसके अंदर एंकर नहीं

Question

एक jquery प्रश्न।

मेरे पास एक div है जिसमें टेक्स्ट और एंकर टैग है।

मैं div टैग और इसकी सामग्री को एंकर टैग को एक्सेल करने के लिए एक क्लिक ईवेंट असाइन करना चाहता हूं।

तो जब मैं div पर क्लिक करता हूं, तो एक चेतावनी विंडो पॉप अप हो जाती है। लेकिन अगर मैं एंकर (div के भीतर है) पर क्लिक करता हूं, तो अलर्ट नहीं होना चाहिए।

<div id="myDiv"> 
    This is the content of the div. 
    <img src="blah.jpg" /> 
    <a href="somewhere.html">Click here</a>. 
    Some more content. 
</div> 

कोई भी विचार:

div कुछ इस तरह हो सकता है? मैं div पर क्लिक ईवेंट असाइन करने के लिए jquery का उपयोग कर रहा हूँ।

Answer 1

आप क्लिक का लक्ष्य जाँच कर सकते हैं के बाद से <a> कोई संतान नहीं है, उदाहरण के लिए:

$("#myDiv").click(function(e) { 
    if(e.target.nodeName == 'A') return; 
    //click handler code 
}); 

Answer 2

निक के जवाब में विस्तार करते हुए, निम्नलिखित क्या मैं के बाद से यह नेस्टेड टैग के लिए खातों का उपयोग कर समाप्त हो गया है।

function handleClick(e) { 
    var $current = $(e.target); 

    // return if we don't want to override another click event 
    // check current tag 
    var tags = ['A', 'BUTTON', 'INPUT']; 
    if (tags.indexOf(e.target.tagName) >= 0) 
     return; 
    // check parent tags 
    var ignoreClick = false; 
    $.each(tags, function(i, tag) { 
     console.log('checking tag', tag); 
     if ($current.parents(tag).length) { 
     ignoreClick = true; 
     return; 
     } 
    }); 
    if (ignoreClick) 
     return; 

    // do your normal click stuff here 
} 

JsFiddle