javascript - 防止父事件在 jQuery 上触发

Question

我的代码中有一个非常烦人的问题。

当我更改复选框状态时，它的父项的单击事件也会触发。我尝试了不同的方法来解决这个问题，例如:

1. event.stopImmediatePropagation();
2. event.stopPropagation();
3. event.preventDefault();
4. 返回错误

不幸的是，没有人为 be 工作(可能与“事件传播”问题无关)。如何让 ('.sortable').click 不在复选框更改时触发？

HTML

<div class="sortable">
    <span>Hello all!</span><br />
    <label>Click on me<input type="checkbox" checked="checked" /></label>
</div>

jQuery

$(function(){
    $('.sortable input[type=checkbox]').change(function(event){
        event.stopImmediatePropagation();
        event.stopPropagation();
        event.preventDefault();
        alert('checkbox changed');
    });

    $('.sortable').click(function(){
        alert('sortable clicked');
    });
});

您可以在以下位置找到代码:Demo

Answer 1

因为您已将点击事件绑定(bind)到父 div，它也会触发该事件。您可以在父单击事件句柄中检查“如果不是复选框则为目标元素”条件，如下所示

$('.sortable').click(function(event){
        if(event.target.type!="checkbox")
        console.log('sortable clicked');
    });

Demo