Question

我有以下代码：

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

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

Fiddle here

如何触发复选框的单击功能而不触发tr功能？有没有jQuery的解决方案？

我不会在输入函数结束时设置return 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点击处理程序中。它将阻止事件将DOM冒泡到父元素。

$(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");
    });

jquery单击事件tr或单击输入

4 个答案: