JavaScript 事件代理中子元素干扰的解决方案

事件代理的基本概念与直接绑定的局限

在开发中，若为 form 内的 button 绑定事件，需留意其是否会触发 form 的 submit 行为。而在其他场景下，直接为 button 绑定事件通常不会引发非预期的附加效果，因此开发者往往自然地采用如下方式编写事件处理代码：

var button = document.querySelector('button')
button.addEventListener('click', function (e) {
 console.log('点击了按钮')
})

这种写法之所以安全，是因为该 button 元素并未使用事件代理，即它没有代理任何子元素的事件。

所谓事件代理，是指将事件绑定在父元素上，而非直接绑定在目标元素自身。当子元素触发特定事件（如点击）时，由于事件冒泡机制，父元素的同类型事件也会被触发，此时即称父元素代理了子元素的事件。

例如，一个 button 内部包含一个齿轮图标：

<button>
 <svg>
 <use xlink:href="#gear" rel="external nofollow" ></use>
 </svg>
</button>

当用户点击该齿轮图标时，必然触发 click 事件。但我们通常不直接将事件绑定到 svg 或 use 元素上，而是将其绑定到父元素 button 上。具体实现如下：

document.querySelector('button').addEventListener('click', function (e) {
 console.log('点击了按钮')
})

在此场景下，我们可以认为 button 元素代理了其所有子元素的 click 事件。

事件代理中子元素干扰的问题分析

然而，当出现这种事件代理情况时，我们必须格外小心。

为了更直观地说明问题，我们将“父”元素的概念扩展到顶层的 document 元素：

document.documentElement.addEventListener('click', function (e) {
 console.log('我被点击了')
})

只要网页中任意位置被点击，都会触发绑定在 document 元素上的点击事件。若要确定事件具体发生在哪个元素上，可以通过事件对象提供的 target 属性进行判断。

document.documentElement.addEventListener('click', function (e) {
 console.log(e.target)
})

我们很容易通过 target 属性确定事件发生的元素。因此，在上述示例中，如果父元素 document 希望在按钮被点击时执行某些操作，开发者通常会自然地写出如下代码：

document.documentElement.addEventListener('click', function (e) {
 if (e.target.tagName === 'BUTTON') {
 console.log('按钮被点击了')
 }
})

此时问题便出现了：即使按钮被点击，if 条件也不一定成立，即“按钮被点击了”的日志不一定输出。这是因为用户可能在按钮内的不同位置点击，导致 e.target 指向以下三种情况之一：

• BUTTON 元素
• SVG 元素
• USE 元素

实际运行结果如下：

我们的真正意图是：只要点击发生在按钮范围内，无论点击的是按钮的哪个部分，都应视为按钮被点击。虽然可以修改代码以达成目的，如下所示：

document.documentElement.addEventListener('click', function (e) {
 if (['BUTTON', 'SVG', 'USE'].includes(e.target.tagName.toUpperCase())) {
 // 点击的是按钮
 }
})

这种写法看似可行且能达到目的，但逻辑上显得别扭。对于最上层的 document 而言，它需要了解每个子元素的具体情况；而实际上，我们只需关心离自己最近的 button 元素即可。

基于封装思想的解决方案：CSS与JS实现

依据面向对象编程（OOP）中“对内封装”的思想，button 元素内部的行为应在其内部处理，其子元素对外不可见，仅暴露 button 元素本身。结合事件冒泡的特性，较好的解决方案是：禁止 button 内部子元素的事件响应（包括事件冒泡），仅允许 button 元素本身的事件发生。实现这一目的有两种方式。

第一种方式是使用 CSS 禁止 button 内部子元素的事件响应：

button > * {
 pointer-events: none;
}

第二种方式是使用 JavaScript 阻止 button 内部子元素的事件响应（包括事件冒泡）：

document.querySelector('button > svg').addEventListener('click', function (e) {
 e.stopPropagation()
 e.preventDefault()
})

document.querySelector('button').addEventListener('click', function (e) {
 console.log(e.target.tagName)
})

这两种方式均能达到预期效果：

综上所述，当对特定元素进行事件处理且该元素存在事件代理时，需谨慎处理其所代理的子元素，以避免因子元素触发事件而导致的逻辑判断失误。

以上就是 JavaScript 事件代理需要注意的地方的详细内容，更多关于 JavaScript 事件代理的资料请关注本站其它相关文章！