为何点击事件中的e.stopPropagation()函数无法生效？

你的问题核心在于事件绑定方式和事件冒泡的执行顺序，具体原因如下：

• 父元素.el用的是内联onclick（DOM0级事件），这种事件会在事件冒泡到.el元素时立即触发执行。
• 子元素.stop的点击事件是通过$(document).on()实现的事件委托，事件委托依赖事件冒泡机制：当点击.stop后，事件会一路冒泡到document节点，此时才会触发你绑定的处理函数。

实际执行顺序是：
点击.stop → 事件冒泡到.el → 触发.el的onclick弹出alert(1) → 事件继续冒泡到document → 触发.stop的委托处理函数，此时调用e.stopPropagation()已经无效——父元素的事件早就执行完毕了。

解决方法 #

方法1：统一用事件委托绑定所有事件 #

把父元素的事件也改成委托绑定，这样所有事件处理函数都会在冒泡到document时按顺序触发，此时stopPropagation()就能阻止后续冒泡（父元素的委托事件不会执行）：

$(document).ready(function() {
  var el = '<div class="el"><div class="stop">X</div>Click</div>';
  $("body").append(el);
})

// 父元素的事件也用委托绑定
$(document).on("click", ".el", function() {
  alert(1);
});

$(document).on("click", ".stop", function(e) {
  e.stopPropagation();
  alert(2);
});

方法2：直接绑定子元素的事件（不用委托） #

如果要保留内联onclick，可以直接把.stop的事件绑定到元素本身，这样事件处理函数会在事件冒泡到.el之前触发，阻止冒泡后父元素的onclick就不会执行了：

$(document).ready(function() {
  var el = '<div class="el" onclick="alert(1);"><div class="stop">X</div>Click</div>';
  $("body").append(el);
  
  // 直接绑定到创建后的.stop元素
  $(".stop").on("click", function(e) {
    e.stopPropagation();
    alert(2);
  });
});

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