如何使用$(document).on绑定点击时阻止外层div事件仅触发内层

我懂你现在的困扰——用$(document).on()这种事件委托方式绑定了外层.task和内层.Name的点击事件，结果点内层的时候外层的弹窗也跟着弹出来了，之前找的方案都不适用。别担心，这是事件委托机制下的常见问题，咱们一步步来解决：

核心思路 #

因为事件委托是把事件绑定在document上，当点击内层元素时，事件会冒泡到document，jQuery会依次检查所有绑定的事件选择器是否匹配（包括外层的.task，毕竟它是内层元素的父级）。所以咱们需要要么在外层事件里做判断，要么在内层事件里阻止事件的后续传播，这里给你两个靠谱的方法：

方法一：在外层事件中判断点击目标（推荐） #

修改.task的点击事件，检查实际点击的元素是不是.Name或者它的子元素，如果是的话直接返回，不执行外层的逻辑：

$(document).on("click", ".task", function(event) {
  // 判断点击的目标是否属于.Name元素
  if ($(event.target).closest(".Name").length) {
    return; // 直接返回，不执行后续的alert
  }
  alert("click outer task");
});

方法二：在内层事件中阻止事件冒泡（注意绑定顺序） #

如果想在内层事件里处理，需要确保内层事件的绑定顺序在外层之后，然后调用event.stopImmediatePropagation()，这样就能阻止同一绑定元素（这里是document）上后续的点击事件执行：

// 先绑定外层事件
$(document).on("click", ".task", function() {
  alert("click outer task");
});
// 后绑定内层事件
$(document).on("click", ".Name", function(event) {
  event.stopImmediatePropagation(); // 阻止document上后续的点击事件执行
  alert("click inner Name");
});

第一种方法更稳妥，不依赖绑定顺序，逻辑也清晰，不会影响其他可能的事件绑定。

完整修改后的代码 #

这里把第一种方法整合到你的代码里：

$(document).ready(function() {
  $('.Name').text('A veery long namemmmmmmeehhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhheeeee');
  
  $(document).on("click", ".task", function(event) {
    // 判断点击目标是否属于.Name
    if ($(event.target).closest(".Name").length) {
      return;
    }
    alert("click outer task");
  });
  
  $(document).on("click", ".Name", function() {
    alert("click inner Name");
  });
});

这样点击.Name的时候，只会触发内层的弹窗，外层的.task事件会因为判断条件直接返回，不会执行弹窗啦。

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