嵌套类名上的事件监听器

Question

我想在单击每个带有 class "category" 的元素时切换 class "collapsed"。问题是，"category" 元素相互嵌套，子元素也会在其父元素上切换 class。

一个例子

HTML结构：

<div class="category">
    <div class="category">
        <div class="category"></div>
    </div>
</div>
<div class="category">
    <div class="category"></div>
</div>

Javascript:

var categories = document.getElementsByClassName("category");
for (var i = 0; i < categories.length; i++) {
    categories[i].addEventListener("click", function () {
        this.classList.toggle("collapsed");
    });
}

当我单击嵌套元素时，"this" select 或 select 具有 class "category" 的父元素。

Answer 1

这是因为事件冒泡并触发所有带有 class 的容器元素。你应该打电话给 event.stopPropagation() 来防止这种情况。

var categories = document.getElementsByClassName("category");
for (var i = 0; i < categories.length; i++) {
    categories[i].addEventListener("click", function (e) {
        e.stopPropagation();
        this.classList.toggle("collapsed");
    });
}

嵌套类名上的事件监听器

eventlistener on nested classnames

javascript

onclick

nested

getelementsbyclassname