JavaScript中的阻止事件冒泡和默认行为的方法

翻滚的胖子
2023-06-20 10:05:04
JavaScript 图片处理

在JavaScript的开发过程中，经常需要对事件进行阻止冒泡和默认行为。那么，如何实现这一功能呢？

阻止事件冒泡

在JavaScript中，可以使用 stopPropagation() 方法来阻止事件冒泡。该方法的使用非常简单，只需要在事件处理程序中调用该方法即可。

event.stopPropagation();

其中，event 表示事件对象。

下面是一个简单的示例，用于演示如何使用 stopPropagation() 方法来阻止事件冒泡：

<div id="outer">
  <div id="inner">
    <button id="btn">Click</button>
  </div>
</div>

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var btn = document.getElementById('btn');

outer.addEventListener('click', function (event) {
  console.log('outer clicked');
});

inner.addEventListener('click', function (event) {
  console.log('inner clicked');
  event.stopPropagation();
});

btn.addEventListener('click', function (event) {
  console.log('button clicked');
});

在上面的示例中，当点击按钮时，会依次输出 button clicked，inner clicked 和 outer clicked，说明事件是按照冒泡顺序依次触发的。如果在 inner 元素的事件处理程序中调用 stopPropagation() 方法，则只会输出 button clicked 和 inner clicked，因为事件不再冒泡到 outer 元素。

阻止默认行为

在JavaScript中，可以使用 preventDefault() 方法来阻止事件的默认行为。该方法的使用也非常简单，只需要在事件处理程序中调用该方法即可。

event.preventDefault();

例如，如果要阻止链接的默认行为，可以在链接的点击事件处理程序中调用该方法：

var link = document.getElementById('link');

link.addEventListener('click', function (event) {
  event.preventDefault();
});

在上面的示例中，点击链接时，不会跳转到链接的目标页面，而是什么也不会发生。

同时阻止事件冒泡和默认行为

如果需要同时阻止事件的冒泡和默认行为，可以在事件处理程序中同时调用 stopPropagation() 和 preventDefault() 方法：

event.stopPropagation();
event.preventDefault();

例如，如果要同时阻止链接的默认行为和冒泡，可以在链接的点击事件处理程序中调用这两个方法：

var link = document.getElementById('link');

link.addEventListener('click', function (event) {
  event.stopPropagation();
  event.preventDefault();
});

在上面的示例中，点击链接时，不会跳转到链接的目标页面，也不会触发链接父元素的点击事件。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com