0

我有一个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/

4

4 回答 4

2

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

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

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

于 2013-05-20T02:14:40.840 回答
1

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

于 2013-05-20T02:17:23.517 回答
0

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

$(document).ready(function () {
$('div.study-box').click(function (e) {
   console.log(e.target.tagName);     
    if(e.target.tagName == 'DIV'){
        // do something
    } else {
        // don't
    }
});
});
于 2013-05-20T02:18:06.890 回答
0

当它可以通过使用 HTML/CSS 简单地完成时，我不建议使用 jQuery。诀窍是，将复选框放在该 div 之外，并使用 CSS 位置属性将其可视地推入 div 内。如果您想了解 CSS Position，请查看以下 URL。

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

于 2013-05-20T05:23:27.693 回答