问题： 我正在使用名为“listtree”的轻量级包构建嵌套树，但每当我将链接放入列表中的父元素时都会遇到错误。
错误单击链接时，会触发单击事件以展开树（因为链接包含在需要此事件侦听器的 div 中）并中断链接重定向的流程。
问题如何在单击具有 click EventListener 的父级中的链接时禁止触发此事件触发器。
https://codepen.io/atopbio/pen/zYwROwV/
<div class="listree-submenu-heading">Settings<a href="https://www.google.com"> A link not working</a></div>
【问题讨论】：
标签： javascript html events dom-events
您可以使用 event.stopPropagation() ，然后在链接和事件监听器中添加一个 id 以在单击链接时触发。
见下面的sn-p：
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/listree/dist/listree.min.css"/>
<title>LisTree</title>
</head>
<body>
<ul class="listree">
<li>
<div class="listree-submenu-heading">Settings<a id="my-link" href="https://www.google.com"> A link not working</a></div>
<ul class="listree-submenu-items">
<li>
<div class="listree-submenu-heading">Personal Settings</div>
<ul class="listree-submenu-items">
<li><a href="">Password Settings</a></li>
<li><a href="">Viewing Preferences</a></li>
</ul>
</li>
<li>
<div class="listree-submenu-heading">Org Settings</div>
<ul class="listree-submenu-items">
<li><a href="">Teams</a></li>
<li><a href="">Billing</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="https://unpkg.com/listree/dist/listree.umd.min.js"></script>
<script>
listree();
//add handler function
function handler(event) {
// stops parent events from being triggered
event.stopPropagation();
}
//add listner for click
document.getElementById("my-link").addEventListener('click', handler, false);
</script>
</body>
</html>还可以查看这个答案here
【讨论】：