javascript - 如何选择复选框而不选择整行（见正文）？

Question

说，我有一个html：

<div class="row">
    <input type="checkbox">
</div>

1. 当用户单击整行时，它会突出显示（事件selected添加的类onClick）。我将onClick事件附加到带有 class 的元素.row。

2. 当用户单击复选框（位于 内部.row）时，该复选框将被选中。但不应突出显示行。

是否可以从事件区域中排除复选框.row区域onClick？

---

更新

这是我现在拥有的：http: //jsfiddle.net/saAGU/

当我完全单击复选框时，我不希望类被切换。

---

更新 2

这是 jQuery 的工作解决方案以供将来使用：http: //jsfiddle.net/saAGU/2/

Answer 1

是的，这是可能的。正确的做法是在复选框上放置一个 onclick 事件，捕获该事件并停止其传播。

像这样的东西：

function checkboxClick (e) {
    e.stopPropagation();
}

请告诉我它是否有效

Answer 2

将点击事件添加到每个复选框并停止其传播。这应该有效 -

e.stopPropagation在复选框单击的事件处理程序中

http://jsfiddle.net/saAGU/3/

Answer 3

如果您捕获事件并查看 event.toElement，您可以查看他们是否单击了 .row 或其他内容。

http://jsfiddle.net/saAGU/1/

$('.row').click(function(event){
    if (event.toElement !== this) // Did the user click on the row directly?
        return;

    $(this).toggleClass('selected');
});