JS阻止点击事件穿透|极客笔记

JS阻止点击事件穿透

在网页开发中，经常会遇到需要在一个元素上绑定点击事件，同时又要阻止事件穿透到其父元素或者子元素的情况。特别是在移动端开发中，点击事件穿透是一个比较常见的问题。本文将介绍如何使用JavaScript来阻止点击事件穿透的方法。

事件冒泡和事件捕获

在介绍如何阻止点击事件穿透之前，首先我们需要了解一下事件冒泡和事件捕获的概念。

事件冒泡

事件冒泡是指当一个元素上的事件被触发时，该事件将会向该元素的祖先元素传播。即先触发子元素的事件，再触发父元素的事件。

事件捕获

事件捕获与事件冒泡相反，事件捕获是指当一个元素上的事件被触发时，该事件会从该元素的祖先元素一直往下传播，直到达到目标元素。

在DOM标准中规定，事件传播分为三个阶段：

捕获阶段：事件从最外层的祖先元素向目标元素传播。
目标阶段：事件在目标元素上触发。
冒泡阶段：事件从目标元素向祖先元素传播。

阻止事件传播

在JavaScript中，我们可以使用stopPropagation()方法来阻止事件的传播，包括事件冒泡和事件捕获。

阻止事件冒泡

当我们想要阻止事件冒泡时，可以在事件处理函数中调用stopPropagation()方法。

document.getElementById('child').addEventListener('click', function(event) {
  alert('子元素被点击');
  event.stopPropagation();
});

document.getElementById('parent').addEventListener('click', function() {
  alert('父元素被点击');
});

在上面的示例代码中，当子元素被点击时，只会弹出子元素被点击的提示框，并不会触发父元素的点击事件。

阻止事件捕获

同样，我们也可以在事件处理函数中调用stopPropagation()方法来阻止事件捕获。

document.getElementById('parent').addEventListener('click', function() {
  alert('父元素被点击');
}, true);

document.getElementById('child').addEventListener('click', function(event) {
  alert('子元素被点击');
  event.stopPropagation();
}, true);

在上面的示例代码中，当子元素被点击时，只会弹出子元素被点击的提示框，并不会触发父元素的点击事件。

阻止点击事件穿透

除了阻止事件冒泡和事件捕获外，我们还可以使用stopImmediatePropagation()方法来阻止事件穿透。

document.getElementById('child').addEventListener('click', function(event) {
  alert('子元素被点击');
  event.stopImmediatePropagation();
});

document.getElementById('parent').addEventListener('click', function() {
  alert('父元素被点击');
});

在上面的示例代码中，当子元素被点击时，只会弹出子元素被点击的提示框，并不会触发父元素的点击事件。