事件.stopPropagation(); 没有按预期表现

Question

我阅读了与event.stopPropagation(); 但是提供的解决方案都不适合我。 基本上我所拥有的是一个默认折叠所有元素的手风琴小部件。 在每个元素 header（dt 标签）上还有一个复选框。 单击复选框不应触发手风琴以使其元素展开。

<dt data-toggle="collapse">
<span class="subscribe-checkbox"><button type="button" class="btn toggle-btn" data-toggle="button"></button></span>
</dt>
<dd>
<p>Accordion content...</p>
</dd>

单击跨度（应充当复选框）应向其添加 class“选中”。 然而，它也扩展了手风琴元素（dd 标签）。 我在 jQuery 中所做的是：

$('.accordion-group .btn.toggle-btn').click(function (event) {
event.stopPropagation();
});

虽然未显示手风琴内容（这很好），但<span>元素也不会更改 class，因此它不会变为“已选中”。 我也试过.live()也没有用。

Answer 1

您必须使用addEventListener ，然后使用 boolean Capture参数来控制父元素的行为。

Answer 2

stopPropagation() 不起作用，因为<dd>不是<span>的父级，因此事件不会从<span>传播到<dd> 。

您必须稍微重组处理程序，也许删除整个代码的父元素的点击处理程序，并为<dd>添加一个新的处理程序