Question

我的代码中存在非常烦人的问题。

当我更改复选框状态时，它的click事件也会触发。我尝试过不同的方法来解决这个问题：

event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
return false

不幸的是没有人可以工作（可能与“事件传播”问题无关）。如何在复选框更改时使('.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

当你将click事件绑定到父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

我对jsfiddle

做了一些研究

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

防止在Jquery上触发父事件

3 个答案: