javascript - jquery 点击事件 tr 或输入被点击

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() 而不是直接事件绑定(bind)，所以您不能使用 stopPropagation()。

首先，.live() 是遗留代码并已被弃用，这意味着它可能会在未来的任何新版本中从库中删除。我不知道您使用的是哪个版本的 jQuery，但您应该考虑转向最新版本(无论如何都更优化)并使用 .on()用于事件委托(delegate)。

不过，如果您无法升级您的 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() 的问题是事件被绑定(bind)到文档，因此随着您的应用程序变得越来越复杂，您可能会为停止传播而头疼。

与此同时，我使用 .on() ( here ) 和 .delegate() ( here ) 制作了一个 fiddle 。