Question

我尝试使用和图标字体，CSS和jQuery设置表单样式。这是我的HTML：

<div class="checkbox">
    <input type="checkbox">
    <span aria-hidden="true" data-icon="u"></span>
</div>

输入本身将被隐藏，因此想法是在单击div.checkbox时，它将触发对输入的单击，然后更改跨度上的data-icon属性以在已检查状态下显示图标字体。

这里我遇到了麻烦。当我运行这个jQuery：

$('.checkbox').on('click', function(){
    $(this).find(':checkbox').click();
    console.log('clicked');
});

记录：

clicked
clicked

我认为e.stopPropagation会有所帮助，但显然它并没有。

Answer 1

单击div（.checkbox）复选框时，单击事件自动触发，因此无需明确触发复选框的click事件。

使用此代码：

$('.checkbox').on('click',function(e){
    console.log('clicked');
});

Answer 2

发现它！如评论中所述，没有任何事件冒泡。这实际上是一个预期的结果。请继续阅读原因。

那发生了什么？

单击div时，将执行其处理程序。

当使用.click()点击复选框时，由于checkbox是div

的孩子，因此会再次触发点击事件

所以，你可以使用它：

您可以使用：

$('.checkbox').on('click', function(){
    if(event.target.nodeName!=='INPUT'){
       $(this).find(':checkbox').click();
       console.log('clicked');
    }
});

以上将确保仅在单击div时才执行该功能。

Answer 3

使用checked属性来停止点击事件冒泡：

$('.checkbox').on('click', function(){
    var box = $(this).find(':checkbox');
    box.prop("checked", !box.prop("checked"));
    console.log('clicked');
});

jsFiddle

或者您可以针对目标进行测试，以确保只注册div上的点击：

$('.checkbox').on('click', function(e){
    if(!$(e.target).is(":checkbox")) {
        $(this).find(':checkbox').click();
        console.log("clicked");
    }
});

jsFiddle

将单击事件绑定到复选框似乎会触发单击两次

3 个答案:

那发生了什么？