要小心 JavaScript 的事件代理
<p>我们知道，如果给 form 里面的 button 元素绑定事件，需要考虑它是否会触发 form 的 submit 行为。除此之外，其它场合给 button 元素绑定事件，你几乎不用担心这个事件会有什么非预期的附加效果，很自然地会这样写事件处理代码：</p><pre><code class="language-js">var button = document.querySelector('button')
button.addEventListener('click', function (e) {
console.log('点击了按钮')
})
</code></pre>
<p>你之所以放心这么写，是因为这个 button 元素没有使用事件代理，即没有代理任何子元素的事件。</p>
<p>事件代理的意思是，你要为一个元素绑定事件，但你不是直接把事件绑定到这个元素自己身上，而是绑定到这个元素的父元素上。当子元素的某个事件（比如点击事件）触发时，它的父元素相同的事件也会触发（我们常说的事件冒泡），此时我们说父元素代理了子元素的事件。</p>
<p>举个例子，比如一个 button 元素中包含一个齿轮图标：</p>
<pre><code class="language-html"><button>
<svg>
<use xlink:href="#gear"></use>
</svg>
</button>
</code></pre>
<p>当用户点击齿轮图标，必然要触发 click 事件，但你并不会直接绑定事件到 svg 或 use 元素上，而是绑定到它们的父元素 button 上。即：</p>
<pre><code class="language-js">document.querySelector('button').addEventListener('click', function (e) {
console.log('点击了按钮')
})
</code></pre>
<p>这种情况，我们可以说，button 元素代理了它的所有子元素的 click 事件。</p>
<p>但是，出现这种事件代理的情况时，我们就得小心了。</p>
<p>为了更直观地说明问题，我们把“父”元素上升到顶层的 document 元素：</p>
<pre><code class="language-js">document.documentElement.addEventListener('click', function (e) {
console.log('我被点击了')
})
</code></pre>
<p>只要网页中任意一个位置被点击了，都会触发绑定在 document 元素上的点击事件。 想要知道事件具体是发生在哪个元素上面，可以通过事件对象提供的 target 属性来判断。</p>
<pre><code class="language-js">document.documentElement.addEventListener('click', function (e) {
console.log(e.target)
})
</code></pre>
<p>我们很容易知道事件具体是发生在哪个元素身上的。于是在上面的示例中，如果父元素 document 想在按钮被点击时做点什么事情，我们很自然地会这么写：</p>
<pre><code class="language-js">document.documentElement.addEventListener('click', function (e) {
if (e.target.tagName === 'BUTTON') {
console.log('按钮被点击了')
}
})
</code></pre>
<p>这时问题就出现了，按钮即使被点击了 if 条件也不一定成立，即也不一定会输出“按钮被点击了”。因为用户在按钮上的某个位置点击了，根据用户点击的位置，e.target 可能是下面三种情况：</p>
<ul>
<li>BUTTON 元素</li>
<li>SVG 元素</li>
<li>USE 元素</li>
</ul>
<p>实际的情况是这样的：</p>
<p><img src="http://qa457e20e.bkt.clouddn.com/202005/25213022" alt=" " loading="lazy"></p>
<p>我们真正的意图是，只要点击是发生在按钮上面，不论是按钮的哪个位置，我们都应视为按钮被点击了。 嗯，简单，我们再改一下，这样写：</p>
<pre><code class="language-js">document.documentElement.addEventListener('click', function (e) {
if (['BUTTON', 'SVG', 'USE'].includes(e.target.tagName.toUpperCase())) {
// 点击的是按钮
}
})
</code></pre>
<p>这样似乎没什么问题，也确实可以达到目的，但看上去总是有些别扭。因为这种情况对于最上层的 document 来说，得知道每个子元素的情况，本来我只需要关心离我最近的 button 元素就可以了。</p>
<p>根据 OOP 对内封装的思想，button 元素内部的事情应该在内部消化掉，其子元素对外不可见，应该只暴露 button 元素本身。依据这个思想和事件冒泡的特点，我们就有了比较好的解决办法：只需要禁止 button 内部元素的事件响应（包括事件冒泡）而只允许 button 元素本身的事件发生就行。有两种方式可以实现这个目的。</p>
<p>一种是使用 CSS 禁止 button 内部元素的事件响应：</p>
<pre><code class="language-css">button > * {
pointer-events: none;
}
</code></pre>
<p>另一种是使用 JS 来阻止 button 内部元素的事件响应（包括事件冒泡）：</p>
<pre><code class="language-js">document.querySelector('button > svg').addEventListener('click', function (e) {
e.stopPropagation()
e.preventDefault()
})
document.querySelector('button').addEventListener('click', function (e) {
console.log(e.target.tagName)
})
</code></pre>
<p>这两种方式都能达到我们预期的效果：</p>
<p><img src="http://qa457e20e.bkt.clouddn.com/202005/25225251" alt=" " loading="lazy"></p>
<p>综上，针对特定元素进行事件处理时，如果该元素有事件代理的情况，就要小心处理它所代理的子元素。</p><br><br>
来源：https://www.cnblogs.com/fehoney/p/12962280.html 感谢楼主的分享！
看完这篇帖子真是受益匪浅，之前确实没太注意事件代理还有这么多讲究。我之前在项目中也遇到过类似的问题，但一直没想到原因出在这里。
只知道用e.target来判断具体点击的元素，没想到SVG、USE这些子元素也会成为target...
不过我有个小疑问想请教一下：
关于帖子最后提到的两种解决方案，我个人感觉用CSS的pointer-events: none更优雅一些，毕竟只需要写一行样式就能搞定，而且不会污染JS代码。
但我想问一下，这种CSS方案会不会有什么浏览器兼容性问题？或者在某些特殊场景下不适用？
另外，帖子主要是以button为例，那如果是其他的元素比如<a>标签或者<input>标签，内部包含图标之类的子元素，是不是也适用同样的处理方式？
再次感谢楼主的详细讲解，学到了！
頁:
[1]