父元素触发事件异常：stopPropagation在动态元素场景失效

嘿，我来帮你搞定这个头疼的事件传播问题！你说点击动态创建的menuBtn按钮时，onclick事件触发了，但event.stopPropagation()完全没用？大概率是这几个原因，咱们一个个来解决：

1. 动态元素的事件绑定方式错了 #

动态创建的元素没法直接用普通的.click()或者内联onclick绑定事件（因为元素创建时，绑定逻辑已经执行完了），必须用事件委托才能让事件生效。举个例子：

// 正确的事件委托写法，绑定到document或者更接近的父容器
$(document).on('click', '.menuBtn', function(e) {
  // 先阻止事件向上冒泡
  e.stopPropagation();
  // 再执行你的打开菜单逻辑
  $(this).css({ "top": PosY, "left": PosX }).fadeIn(200);
});

这样不管menuBtn是何时创建的，点击事件都能被捕获，而且stopPropagation()也能正常工作。

2. 没有正确传递事件对象 #

如果你坚持用内联onclick的方式，一定要记得把event参数传进函数里，不然event是undefined，调用stopPropagation()当然没效果：

<!-- 内联绑定要传入event -->
<div class="menuBtn" onclick="open_menu(this, event)">菜单按钮</div>

<script>
function open_menu(elm, event) {
  // 先阻止传播
  event.stopPropagation();
  // 再执行菜单逻辑
  $(elm).css({ "top": PosY, "left": PosX }).fadeIn(200);
}
</script>

3. 同一元素有多个事件监听器？试试stopImmediatePropagation() #

如果你的menuBtn上绑定了多个点击事件，stopPropagation()只会阻止事件向上冒泡，但不会阻止同一元素的其他监听器执行。这时候可以用e.stopImmediatePropagation()，它会同时阻止冒泡和同一元素的后续事件触发：

$(document).on('click', '.menuBtn', function(e) {
  e.stopImmediatePropagation(); // 阻止冒泡+同一元素其他事件
  $(this).css({ "top": PosY, "left": PosX }).fadeIn(200);
});

额外检查：有没有父元素的事件委托在捕获阶段？ #

虽然这种情况很少见，但如果父元素用addEventListener时设置了第三个参数true（捕获阶段触发），那stopPropagation()在冒泡阶段的阻止就会失效。这时候你需要在捕获阶段也阻止事件，或者调整父元素的事件绑定方式。

内容的提问来源于stack exchange，提问作者Takit Isy