js 如何只触发最外层元素事件

Question

子元素可以通过stopPropagation()阻止向父元素冒泡，那么怎么只触发父元素的事件呢，例如点击body阻止页面的所有click事件，我用addEventListener绑定元素，然后将useCapture设置为true,可是不知道如何阻止捕获。

Answer 1

事件捕获阶段是浏览器去查找到底是那个元素被点击了。从而定位到被点击的dom元素。如果你在浏览器捕获阶段就阻止事件往下传播的话，浏览器就不知道到底那个dom被点击了，也就不会有冒泡机制了。所以浏览器没有给开发者提供阻止捕获的方法。 要明白，冒泡机制是基于捕获来实现的。捕获是浏览器原生行为。

Answer 2

首先，冒泡的顺序是从鼠标直接点击的那个元素开始，一层一层往window对象冒泡的。这是冒泡的顺序。
如果已经冒泡到了body，那之前的那些元素的click委托早就执行完毕了。

阻止捕获这个词，我没听说过，这种事貌似不可能吧，而且我也刚搜了一下，没有结果。你只能阻止冒泡，而且这个功能就够了，如果阻止捕获都可以做到，这是不是太霸道了点。

然后给你提个解决方案吧：
虽然我还不理解你想干什么，不过你既然想禁用页面所有元素的点击事件，你可以这样做
在满足你的时间点或者其他条件的地方：
在body 根节点下创建一个div，样式自然是

width: 100%;
height: 100%;
position: absolute;
z-index: 100000; /* 只要保证不被其他元素覆盖即可 */
background: none;

然后如果必要，再给body一个overflow: hidden;

这样你点什么都不行了～

Answer 3

为什么不可以在捕获阶段阻止传播？只要你是监听的捕获阶段的事件就可以
网上很多解释只知道stopPropagation可以阻止冒泡，是因为这是最常见的需求——阻止子元素在冒泡阶段冒泡事件。
但是stopPropagation本身的作用看英文名称就知道了：stop——停止 propagation——传播。如果只是阻止冒泡直接叫做stopBubble得了。不管是捕获还是冒泡都是一个传播的过程啊。
另外：捕获是原生行为，冒泡就不是吗，难道是自己手动传递的？

官方解释