如何停止jQuery中的事件冒泡？

Question

我在check box上使用了一些JQ东西，即使单击了父div 。 我切换check box的值。 单击div可以正常工作，但是当您单击复选框时，该函数将被调用两次。 有什么办法解决这个问题？ 以下是我的代码（ Fiddle ）HTML：

<div class="check-unit">
    <input type="checkbox" class="check" />
    <p class="brandList">Model</p>
</div>

JQ：

$('.check').on('change',function(e){
    e.stopImmediatePropagation();
    if($(this).is(':checked')){
        console.log("checked");
    }else{
        console.log("unchecked");
    }
});

$('.check-unit').on('click',function(e){
    var checkbox = $(this).children('.check'),
    chhhk= checkbox.attr('checked') ? false : true;
    checkbox.attr('checked',chhhk);
    $(this).children('.check').change();
});

我已经在stackoverflow上看到了eventbubbling问题，但仍然对如何做到这一点感到困惑。 小提琴

Answer 1

如果目标不是输入，则仅在父元素上执行回调

$('.check').on('change',function(e){
    if(this.checked){
        console.log("checked");
    }else{
        console.log("unchecked");
    }
});

$('.check-unit').on('click',function(e){
    if ( ! $(e.target).hasClass('check')) {
        $(this).children('.check').prop('checked', function(_,state) {
            return !state;
        }).trigger('change');
    }
});

小提琴

作为旁注，这就是label元素的作用！

Answer 2

您需要使用.prop（）而不是.attr（）来设置选中的属性。

$('.check').on('change', function (e) {
    if (this.checked) {
        console.log("checked");
    } else {
        console.log("unchecked");
    }
}).click(function (e) {
    //prevent clicks in the checksboxes from bubbling up otherwise when you click on the checkbox the state will get toggled again the event will be bubbled to check-unit which will again toggle the state negating the click
    e.stopPropagation()
});
$('.check-unit').on('click', function () {
    var checkbox = $(this).children('.check'),
        //use .is() and checked-selector to check whether the checkbox is checked
        chhhk = checkbox.is(':checked');
    //use .prop() instead of .attr() & toggle the checked state
    checkbox.prop('checked', !chhhk).change();
});

演示： 小提琴

Answer 3

您可以在更改之前检查是否单击了复选框。

$('.check-unit').on('click', function (e) {
    if (!($(e.target).hasClass('check'))) {
        var checkbox = $(this).children('.check'),
            chhhk = checkbox.prop('checked');
        checkbox.prop('checked', !chhhk).change();
    }
});

还要注意，代码使用的是prop而不是attr，因为使用布尔属性值时应使用.prop()

DEMO