JS中的stopPropagation方法详解|极客笔记

JS中的stopPropagation方法详解

在JavaScript中，事件传播是一个重要的概念。当一个事件被触发时，它会沿着DOM树的路径传播到所有相关的元素。在这个过程中，事件会经历两个阶段：捕获阶段和冒泡阶段。在这篇文章中，我们将重点讨论stopPropagation方法，这个方法可以用来阻止事件在DOM树中继续传播。

事件传播的三个阶段

在介绍stopPropagation方法之前，我们先来了解一下事件传播的三个阶段：

捕获阶段：事件从最外层的父元素开始向目标元素传播，依次经过每一个父元素。
目标阶段：事件达到目标元素本身，并触发在目标元素上绑定的事件处理函数。
冒泡阶段：事件从目标元素开始向最外层的父元素传播，依次经过每一个父元素。

通过了解这三个阶段，我们可以更好地理解事件是如何在DOM树中传播的。

stopPropagation方法的作用

stopPropagation方法是用来停止事件在DOM树中继续传播的。当事件触发时，如果调用了stopPropagation方法，那么事件将不再传播到更深层次或更浅层次的元素。这可以在一定程度上阻止事件的默认行为或其他事件处理函数的执行。

使用示例

下面我们通过一个简单的示例来演示stopPropagation方法的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stopPropagation示例</title>
    <style>
        div {
            padding: 10px;
            margin: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="outer">
        Outer Div
        <div id="inner">
            Inner Div
        </div>
    </div>

    <script>
        const outerDiv = document.getElementById('outer');
        const innerDiv = document.getElementById('inner');

        outerDiv.addEventListener('click', function(event) {
            alert('Outer Div Clicked');
        });

        innerDiv.addEventListener('click', function(event) {
            event.stopPropagation();
            alert('Inner Div Clicked');
        });
    </script>
</body>
</html>

在这个示例中，我们创建了一个外层div和一个内层div。当点击内层div时，会触发内层div的点击事件处理函数，并调用stopPropagation方法来阻止事件继续传播。这样一来，外层div的点击事件处理函数将不会被触发。