click.stop 阻止事件冒泡

**点击停止事件冒泡**

在网页开发中，事件冒泡是指当一个元素被点击或触发某个事件时，它会向上冒泡到其父元素，直到达到顶级的document对象。这种机制允许我们捕捉到事件并对其进行处理。但有时，我们可能需要阻止事件冒泡，以便只让当前元素响应事件，而不影响其他元素。

**什么是click.stop()**

`click.stop()` 是一个用于阻止事件冒泡的方法，它可以在点击或触发某个事件后立即停止事件的传播。这种方法主要用于那些需要独自处理事件而不影响其他元素的情况。

**使用click.stop()的场景**

1. **单击按钮时，仅让当前按钮响应事件，而不影响其他元素**。
2. **在点击某个元素后，关闭弹窗或遮罩层**。
3. **阻止事件传播到父元素或祖先元素**。

**示例代码**

### 示例1：单击按钮时，仅让当前按钮响应事件

html<!-- index.html -->
<button id="myButton">点击我</button>

<script>
 // 获取按钮元素 const myButton = document.getElementById('myButton');

 // 绑定点击事件 myButton.addEventListener('click', function() {
 console.log('当前按钮响应事件');
 // 阻止事件冒泡 event.stopPropagation();
 });
</script>

html<!-- index.html -->
<div id="myDiv" style="background-color: #ccc; padding:20px;">
 <button id="closeButton">关闭</button>
</div>

<script>
 // 获取按钮元素 const closeButton = document.getElementById('closeButton');

 // 绑定点击事件 closeButton.addEventListener('click', function() {
 console.log('关闭弹窗或遮罩层');
 // 阻止事件冒泡 event.stopPropagation();
 // 关闭弹窗或遮罩层的逻辑 const myDiv = document.getElementById('myDiv');
 myDiv.style.display = 'none';
 });
</script>

html<!-- index.html -->
<div id="parent">
 <div id="child">
 <button id="myButton">点击我</button>
 </div>
</div>

<script>
 // 获取按钮元素 const myButton = document.getElementById('myButton');

 // 绑定点击事件 myButton.addEventListener('click', function() {
 console.log('当前按钮响应事件');
 // 阻止事件冒泡 event.stopPropagation();
 });
</script>