HTML中如何避免点击子元素时触发父元素的点击事件？

这是典型的事件冒泡导致的问题！当你点击子元素（比如那个.ic-folder的span）时，浏览器的事件流会让这个点击事件从子元素开始，一层层向上传递到它的父元素（也就是外层的a标签），所以父元素的Expand_Now函数也跟着被触发了。给你两种简单有效的解决办法：

方法一：在子元素的点击函数里阻止事件冒泡 #

这是最直接的方式，在子元素的点击事件处理函数中，调用event.stopPropagation()来切断事件向上传递的路径。

修改你的代码： #

首先更新子元素的onclick属性，把event对象传进去：

<a href="javascript:void(0)" id="@child.ItemType@child.LiveID" onclick="Expand_Now(this)"> 
  <span align="right"></span>
  <span class="ic-folder" onclick="menuOpen(event, this)">...</span>
</a>

然后修改menuOpen函数，先执行阻止冒泡的操作：

function menuOpen(event, el) {
  // 阻止事件向上冒泡，父元素的点击事件就不会被触发了
  event.stopPropagation();
  
  // 这里写你原来的菜单打开逻辑，比如：
  // el.classList.toggle('open');
  // ...其他代码
}

方法二：在父元素的函数里判断事件源 #

如果你不想修改子元素的逻辑，也可以在父元素的Expand_Now函数里，判断点击的目标是不是父元素本身，如果是才执行逻辑：

function Expand_Now(el) {
  // 检查当前点击的目标是不是a标签本身
  if (event.target === el) {
    // 这里写父元素的展开逻辑
    console.log("父元素展开操作");
  }
}

原理补充： #

DOM事件流分为捕获阶段、目标阶段和冒泡阶段。默认情况下，事件是在冒泡阶段触发的——从触发事件的元素向上传递到根节点。stopPropagation()就是让事件停在当前元素，不再向上传播，自然就不会触发父元素的事件了。

内容的提问来源于stack exchange，提问作者Praveen Patel G