事件.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>添加一個新的處理程序