Javascript 嵌套类名上的eventlistener

我想在单击类“category”时在每个元素上切换类“collapsed”。问题是，“category”元素彼此嵌套，子元素也在父元素上切换类

一个例子

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");
    });
}

var categories=document.getElementsByClassName（“类别”）；
对于（变量i=0；i

---

当我单击嵌套元素时，“this”选择器还将选择类为“category”的父元素。

这是因为事件弹出并触发类的所有容器元素。您应该调用

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");
    });
}

var categories=document.getElementsByClassName（“类别”）；
对于（变量i=0；i

然后你能解释一下为什么在这种情况下它不起作用，以防止锚触发和导航：是因为它只停止传播锚实际上没有设置的

点击
事件，假设
href
事件不相同，如果是这样，如何停止导航？您还需要
e.preventDefault（）
来覆盖单击链接的默认操作。好的，谢谢，在其他地方使用它，尽管希望有一个不使用它的解决方案。