点击事件触发时如何获取绑定监听的最外层元素而非内部点击目标？

解决方案 #

你要获取绑定点击事件的外层元素，不需要调整冒泡、捕获逻辑，直接把代码里的event.target替换为event.currentTarget即可实现需求。

原理解释 #

• event.target 指向你实际点击到的最内层DOM节点，也就是你现在拿到的内部子元素，这个值和事件传播阶段无关，不管是捕获还是冒泡阶段都不会变化
• event.currentTarget 指向当前触发的事件处理函数所绑定的DOM节点，你把点击事件绑定到了id为show_trash_id的div上，所以不管点击该div内部的哪个子元素，这个值固定是你需要的外层div。

通用场景补充 #

如果你是用事件委托把事件绑定到了更上层的节点，需要匹配指定的外层元素，也可以用closest方法，写法如下：

console.log(event.target.closest('#show_trash_id'))

该方法会从点击的目标节点开始向上查找，返回第一个匹配指定选择器的祖先元素，也能拿到你要的外层div。

修改后完整代码 #

function capture (event) {
   event.stopPropagation();
   console.log(event.currentTarget);
}
document.querySelector('#show_trash_id').addEventListener('click', capture, true) 

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