如何阻止事件在父元素中触发？DOM事件绑定问题咨询

看起来你遇到的核心问题是事件冒泡/事件委托的目标匹配错误——当用自定义的MyStuff.Events.bOn绑定事件后，事件处理函数被错误地在父元素（或其他非目标区域）的点击中触发了。下面给你几个直接可行的解决方案：

1. 在事件处理函数中严格校验触发目标 #

这是最稳妥的方法，不管自定义绑定的底层实现是直接绑定还是事件委托，都能精准控制只有点击目标div时才执行逻辑：

function fOnClick(event) {
  // 拿到你绑定事件的div元素（如果已经存了dDragger变量就直接用）
  const targetElement = dDragger;
  
  // 检查点击的目标是否是div本身，或者div的子元素（如果允许点击子元素触发的话）
  if (!targetElement.contains(event.target)) {
    return; // 不是点击div区域，直接终止函数
  }

  // 你的原有业务逻辑写在这里
  console.log("只有点击div时才会执行这段代码");
}

这里的contains()方法会检查event.target是否是目标div的后代元素（包括div本身），如果你的div是纯正方形没有子元素，也可以直接用event.target === targetElement来判断，更严格。

2. 阻止事件传播（针对冒泡导致的误触发） #

如果自定义绑定是直接绑定到div，但事件冒泡导致父元素的同类事件被触发（不过你说原来用addEventListener没问题，这种可能性较低），可以在处理函数中阻止事件继续向上传播：

function fOnClick(event) {
  // 阻止事件冒泡到父元素
  event.stopPropagation();
  
  // 你的业务逻辑
}

注意：这个方法只解决事件冒泡的问题，如果是自定义绑定用了事件委托但没过滤目标，这个方法没用，还是得用第一种方法。

3. 修复自定义绑定函数的实现（如果有权限修改） #

如果MyStuff.Events.bOn是你们自己封装的工具函数，那大概率是它的事件委托逻辑没做目标过滤。你可以修改它的实现，让它支持指定目标选择器，比如：

MyStuff.Events = {
  // 新增selector参数，指定触发回调的目标元素
  bOn: function(parentEl, eventName, selector, callback) {
    parentEl.addEventListener(eventName, function(event) {
      // 找到匹配选择器的目标元素
      const target = event.target.closest(selector);
      if (target) {
        // 把事件对象和目标元素传给回调
        callback.call(target, event);
      }
    });
  }
};

// 使用的时候这样写：
MyStuff.Events.bOn(document, 'click', 'div', fOnClick);

这样只有点击匹配div选择器的元素时，才会执行fOnClick，从根源上避免了父元素触发的问题。

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