面试题：JavaScript 事件冒泡与捕获中的阻止操作

在捕获阶段阻止事件继续向下传递：
- 在捕获阶段，可以使用 event.stopImmediatePropagation() 来阻止事件继续向下传递。event.stopImmediatePropagation() 不仅会阻止事件继续在捕获或冒泡阶段传播，还会阻止同一元素上的其他事件监听器被调用。
event.stopPropagation() 对后续事件监听器的影响：
- 当在事件处理函数中使用 event.stopPropagation() 时，它只会阻止事件的冒泡，即事件不会再向上传递到父元素的事件监听器（冒泡阶段）。但对于捕获阶段的事件监听器，如果事件已经到达了当前元素的捕获阶段处理函数，event.stopPropagation() 不会影响之前已经在捕获阶段注册的事件监听器的执行。
- 以下是代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="parent">
        <div id="child">点击我</div>
    </div>
    <script>
        const parent = document.getElementById('parent');
        const child = document.getElementById('child');

        // 父元素捕获阶段监听器
        parent.addEventListener('click', function (event) {
            console.log('父元素捕获阶段监听器');
        }, true);

        // 子元素捕获阶段监听器
        child.addEventListener('click', function (event) {
            console.log('子元素捕获阶段监听器');
            event.stopPropagation();
        }, true);

        // 子元素冒泡阶段监听器
        child.addEventListener('click', function (event) {
            console.log('子元素冒泡阶段监听器');
        });

        // 父元素冒泡阶段监听器
        parent.addEventListener('click', function (event) {
            console.log('父元素冒泡阶段监听器');
        });
    </script>
</body>

</html>

在上述代码中，点击 child 元素时，会依次输出：
- “子元素捕获阶段监听器”，因为在子元素捕获阶段监听器中调用了 event.stopPropagation()，所以事件不会再冒泡到父元素的冒泡阶段监听器，也就不会输出“父元素冒泡阶段监听器”。
- “子元素冒泡阶段监听器”，因为它在 event.stopPropagation() 调用之后。
- 而父元素捕获阶段监听器会在子元素捕获阶段监听器之前执行，所以也会输出“父元素捕获阶段监听器”。

星途面试题库

面试题：JavaScript 事件冒泡与捕获中的阻止操作

知识考点

面试题答案