应检查 event.target === event.currenttarget，而非使用不存在的 self 属性；target 是实际触发事件的最深元素，currenttarget 是绑定监听器的元素；仅当二者相等时才执行逻辑，可精准响应元素自身事件而不干扰冒泡。
在事件冒泡过程中，若想只处理绑定元素自身的事件（即忽略子元素触发的同类型事件），关键不是靠 self 属性——JavaScript 原生事件对象中**没有 self 属性**。你真正需要的是 事件对象的 currentTarget 与 target 的区分，并结合事件委托或监听策略来实现“仅响应自身触发”的效果。
理解 currentTarget 和 target 的区别
这是实现目标的核心前提：
-
event.target：实际被点击（或触发事件）的那个最深的元素（可能是子元素）； -
event.currentTarget：当前绑定事件监听器的那个元素（即addEventListener所在的 DOM 节点）。
在冒泡阶段，二者通常不同；当点击子元素时，target 是子元素，currentTarget 才是父容器（即你绑定事件的地方）。所以，若只想响应“直接作用于该元素本身”的交互（比如点击盒子空白处，而非其内部按钮），应检查 target === currentTarget。
只响应绑定元素自身触发的事件（非子元素）
在事件回调中加一层判断即可：
box.addEventListener('click', function (e) {
if (e.target !== e.currentTarget) return; // 点击了子元素，不处理
console.log('点击的是 box 自身，不是它的子元素');
});
这个模式常用于菜单容器、卡片、模态框等场景：点击卡片空白区域关闭/选中，但点击内部按钮、链接则执行各自逻辑，互不干扰。
避免用 stopPropagation，优先用逻辑过滤
不要为了“只处理自身”而盲目调用 e.stopPropagation()：
- 它会阻断冒泡，影响外层可能依赖该事件的逻辑（如全局点击收起菜单）；
- 用
target === currentTarget过滤更精准、无副作用，且保留事件传播能力； - 只有当你明确需要中断冒泡链时，才使用
stopPropagation。
补充：如果真想模拟“self”语义（Vue 风格）
某些框架（如 Vue）提供 @click.self 修饰符，其本质就是上述 target === currentTarget 的语法糖。原生 JS 中可封装一个工具函数提升复用性：
function onSelf(element, type, handler) {
element.addEventListener(type, e => {
if (e.target === e.currentTarget) {
handler.call(element, e);
}
});
}
// 使用
onSelf(box, 'click', () => {
console.log('仅 box 自身被点击');
});
不复杂但容易忽略：关键不在“阻止”，而在“识别”。用对 currentTarget 和 target，就能干净、可控地实现“只响应自身”的行为。
