Question

我在div中有一个带有复选框的div：

<div class="study-box set-box">
    <span class="set-box-title"><i class="icon-th-list icon-white"></i>test set</span>
    <input class="study-box-checkbox" type="checkbox" />
</div>

我希望整个div都是可点击的，所以我可以执行onClick（）事件。但是，我不希望在单击复选框时调用此事件。我正在考虑在复选框的左侧和底部添加一些区域并将事件绑定到这些区域，但这看起来很糟糕。思考？

带有示例框/复选框的JSFiddle：

http://jsfiddle.net/PTSkR/59/

Answer 1

单击输入时停止事件传播。

$(".study-box").on("click", function () {
    console.log("clicked");
});
$("input").on("click", function (e) {
    e.stopPropagation();
});

http://jsfiddle.net/PTSkR/60/

Answer 2

一个简单的解决方案是创建一个包装器并将其设置为position：relative（删除位置：相对于研究框），并将复选框移到研究框之外。它仍然以相同的方式定位，但不会受到悬停和点击研究框的影响。

Answer 3

发生点击事件时，请检查目标。

$(document).ready(function () {
$('div.study-box').click(function (e) {
   console.log(e.target.tagName);     
    if(e.target.tagName == 'DIV'){
        // do something
    } else {
        // don't
    }
});
});

Answer 4

我不建议使用jQuery，只需使用HTML / CSS即可完成。诀窍是，将复选框放在该div之外，并使用CSS position属性在div中直观地推送它。如果您想了解CSS位置，请查看以下网址。

http://www.tutorialrepublic.com/css-tutorial/css-position.php

如何排除div的整个区域，同时排除该区域顶部的复选框？

4 个答案: