防止在 Jquery 上触发父事件

Question

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

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

1. event.stopImmediatePropagation();
2. event.stopPropagation();
3. event.preventDefault();
4. return false

不幸的是，没有人为 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

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

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

Demo

Answer 2

因为您正在停止传播 .change() 事件并处理 .click() 事件

尝试改变：

$('.sortable input[type=checkbox]').change(function(event){ ... });

到：

$('.sortable input[type=checkbox]').click(function(event){ ... });

希望对你有帮助！

这是一个工作示例：http://fiddle.jshell.net/vjKGv/

Answer 3

我对@9​​87654321@做了一些研究

$(function(){

    $('.sortable').click(function(e){
        e.preventDefault();
        console.log('sortable clicked');
    });
    $('.sortable input[type=checkbox]').click(function(event){
        //event.stopImmediatePropagation();
        event.stopPropagation();
        //event.preventDefault();
        console.log('checkbox changed');
    });
});