तालिका पंक्ति पर ईवेंट पर क्लिक करें - केवल तभी ट्रिगर करें यदि कुछ भी 'क्लिक नहीं किया गया'

Question

मुझे कुछ jQuery कोड के साथ कुछ समस्याएं आ रही हैं, और मैं उम्मीद कर रहा हूं और सोच रहा हूं कि समाधान अपेक्षाकृत सरल है।

मैं की तरह एक मेज है कहते हैं:

<table> 
    <tr> 
    <td><input type="checkbox" name="hai" value="der" /></td> 
    <td><a href="mypage.php">My link</a></td> 
    <td>Some data</td> 
    <td>Some more data</td> 
    </tr> 
    ... 
</table> 

अब जावास्क्रिप्ट के माध्यम से मैं jQuery में निम्नलिखित (document) .ready करना();

jQuery("table tr").click(function(){ 
    var row = jQuery(this); 
    var hasClass = row.hasClass("highlight"); 
    jQuery("table tr").removeClass("highlight"); 
    if(!hasClass){ 
    row.addClass("highlight"); 
    } 
}); 

यह सब बहुत सरल सामान है - मैं एक पंक्ति क्लिक करने के लिए सक्षम होना चाहते हैं और वह हाइलाइट किया जा रहा है और केवल एक पंक्ति एक समय में प्रकाश डाला जा सकता है (जाहिर है अपने वास्तविक कोड में मुझे लगता है कि अधिक से अधिक करना) - अब मेरी समस्या है:

जब कोई उपयोगकर्ता एंकर टैग या चेकबॉक्स पर क्लिक करता है, तो यह पंक्ति क्लिक ईवेंट को भी ट्रिगर करता है और मैं इसे फ़िल्टर करने के तरीके को कैसे काम नहीं कर सकता? मुझे पता है कि मुझे अपने क्लिक हैंडलर में ईवेंट शामिल करने की आवश्यकता है, लेकिन इस तरह से इस तरह की जांच कैसे करें कि यह जितना संभव हो उतने ब्राउज़रों में काम करता है?

Answer 1

अन्य तत्वों को हैंडलर जोड़ने का प्रयास करें जो क्लिक ईवेंट पर प्रतिक्रिया देते हैं और ईवेंट को बुलबुले से रोकते हैं। यह आपके पास पहले से मौजूद है के अतिरिक्त होगा।

jQuery('table input, table a').click(function(e) { 
    e.stopPropagation(); 
    return true; 
}): 

Answer 2

$("table tr").click(function(e){ 

if (e.target instanceof HTMLInputElement || e.target instanceof HTMLAnchorElement){ 
return; 
} 
var row=$(this); 
$('table tr').removeClass('highlight'); 
row.addClass('highlight','normal'); 

}) 

Answer 3

$("table tr").click(function(event){ 
    if (event.currentTarget.tagName != "TR") { return; } 

    $(this).closest("table").find("tr.highlight").removeClass("highlight"); 
    $(this).addClass("highlight"); 
});