jQuery的單擊事件TR或輸入點擊

Question

我有以下代碼：

$(document).ready(function() { 
    $("tr").live('click',function(){ 
     alert("TR"); 
    }); 

    $("input").live('click',function(){ 
     alert("INPUT");  
    });  
}); 

Fiddle here

我怎麼能只觸發的複選框點擊功能而不觸發TR功能？有沒有解決方案與jQuery？

我不會在輸入函數的末尾設置返回false，我真的也需要tr元素。

信息：event.stopPropagation不適用於live（）事件。

Answer 1

您可以在事件對象上使用stopPropagation()方法。

它會阻止事件冒泡而不取消默認事件行爲。

$(document).ready(function() { 
    $("tr").click(function(){ 
     alert("TR"); 
    }); 

    $("input").click(function(e){ 
     alert("INPUT");  
     e.stopPropagation(); 
    });  
}); 

---

，因爲它似乎你正在使用.live（），而不是直接的事件綁定，則不能使用stopPropagation（）。

首先，.live()是合法代碼，已被棄用，這意味着它可以在任何未來的新版本中從庫中刪除。我不知道您正在使用哪個版本的jQuery，但您應該考慮移至最新版本（無論如何都會進行更優化），並使用.on()進行事件授權。

儘管如此，如果你不能升級你的jQuery庫，這可能是你的問題的解決方案。傳遞給所有事件處理程序的事件參數包含一個屬性target，它引用從中啓動事件的元素。所以你可以做這樣的事情：

$("tr").live('click',function(e){ 
    if (e.target.nodeName !== "INPUT") { 
    // if ($(e.target).is('input') === false) { // jquery style but maybe less efficient 
     alert("TR"); 
    } 
}); 

不是很優雅，但伎倆。這是一個example。

.live()的問題在於事件綁定到文檔，以至於應用程序變得越複雜，您最終可能會因爲停止傳播而頭疼。

與此同時，我用.on()（here）和一個使用.delegate()（here）做了小提琴。

Answer 2

您需要將stopPropagation()添加到您的input點擊處理程序中。它會停止將事件冒泡到父元素的事件。

$(document).ready(function() { 
    $("tr").click(function(){ 
     alert("TR"); 
    }); 

    $("input").click(function(e){ 
     alert("INPUT");  
     e.stopPropagation(); 
    });  
}); 

Example fiddle

OP更新問題：

$(document).ready(function() { 
    $("TABLE").delegate("tr", 'click',function() { 
     alert("TR"); 
    }); 

    $("TABLE").delegate("input", 'click',function(e) { 
     e.stopPropagation(); 
     alert("INPUT");  
    });  
}); 

Answer 3

使用stopPropagation()輸入處理

http://jsfiddle.net/KJg6Q/

Answer 4

http://jsfiddle.net/LwvYD/2/

手柄e.stopPropagation()輸入或使用e.relatedTarget

$("tr").click(function(e){ 
     if(e.relatedTarget.tagName != "input") 
      alert("TR"); 
    });