JS 事件冒泡阻止和问题汇总

[TOC]

### 1. 阻止冒泡方法

阻止事件向上传递需要使用到 `event` 对象下的 `stopPropagation()` 方法，对于低版本的浏览器不支持 `stopPropagation()` 方法，则需要使用 `window.event.cancelBubble` 属性，当这个属性为true时就可阻止冒泡

**通用示例代码：**

```JS
//阻止事件冒泡，e触发的事件
function stopBubble(e) {
  //如果提供了事件对象，则这是一个非IE浏览器
  if (e && e.stopPropagation)
    //因此它支持W3C的stopPropagation()方法
    e.stopPropagation();
  else
    //否则，我们需要使用IE的方式来取消事件冒泡
    window.event.cancelBubble = true;
}
```

> Tip：本文中出现的stopBubble(event)，都来自于此通用示例代码

### 2. 成功阻止冒泡应用

点击id=innerButton的按钮，id=innerContainer的div点击事件不会触发，这样就阻止了事件的向上传递，现实场景中这种需求是很普遍的，事件传递有时会造成一些不必要的不良用户体验，也会影响页面的渲染效果和性能

```HTML
<!DOCTYPE html>
<html>
<body>
  <button id="outerButton">外部按钮</button>
  <div id="innerContainer" style="border: 1px solid #ddd;margin: 20px 0px;">
    <button id="innerButton">内部按钮</button>
  </div>
  <script>
    document.getElementById("outerButton").addEventListener("click", function (event) {
      console.log("外部按钮被点击");
    });
    document.getElementById("innerButton").addEventListener("click", function (event) {
      console.log("内部按钮被点击");
      stopBubble(event); // 阻止事件冒泡
    });
    document.getElementById("innerContainer").addEventListener("click", function (event) {
      console.log("内部容器被点击");
    });
  </script>
</body>
</html>
```

### 3. 阻止冒泡失败案例

**bug描述：**之前在写阻止冒泡的时候出现过一次bug，原因是对元素的默认行为和事件没搞清楚，bug的代码如下，这段代码本来要达到的目的是点击span标签时，触发span的点击事件即可，不要触发到a标签上的事件，但下面的这种写法确怎么也无法阻止事件的冒泡行为

**bug代码示例：**

```HTML
<!DOCTYPE html>
<html>
<body>
  <div style="border: 1px solid red;margin: 20px 0px;">
    <a id="linka1" href="javascript:linka()">你无法阻止我冒泡&nbsp;&nbsp;<span id="links1">小a你不许冒泡</span></a>
  </div>
  <script>
    document.getElementById("links1").addEventListener("click", function (event) {
      console.log("span1点击");
      stopBubble(event); // 阻止事件冒泡
    });

function linka() {
      console.log("我冒泡了");
    }
  </script>
</body>
</html>
```

**bug产生的原因：**出现这种bug的原因就是a标签的href属性，示例中`href="javascript:linka()"`的写法不是真的点击事件，href它是a标签的默认行为，所以正常阻止事件冒泡的写法是不会起作用的，所以解决这种情况的思路有以下两种

1. 改变a标签的写法，使用正常的`onclick`来触发点击事件
```HTML
<!DOCTYPE html>
<html>
<body>
  <div style="border: 1px solid red;margin: 20px 0px;">
    <a id="linka1" href="javascript:void(0)" onclick="linka()">你无法阻止我冒泡&nbsp;&nbsp;<span id="links1">小a你不许冒泡</span></a>
  </div>
  <script>
    document.getElementById("links1").addEventListener("click", function (event) {
      console.log("span1点击");
      stopBubble(event); // 阻止事件冒泡
    });

function linka() {
      console.log("我冒泡了");
    }
  </script>
</body>
</html>
```

2. span标签点击时，阻止a标签的默认行为，使用`event.preventDefault()`
```HTML
<!DOCTYPE html>
<html>
<body>
  <div style="border: 1px solid red;margin: 20px 0px;">
    <a id="linka1" href="javascript:linka()">你无法阻止我冒泡&nbsp;&nbsp;<span id="links1">小a你不许冒泡</span></a>
  </div>
  <script>
    document.getElementById("links1").addEventListener("click", function (event) {
      console.log("span1点击");
      event.preventDefault() // 可以阻止a标签的默认行为
    });

function linka() {
      console.log("我冒泡了");
    }
  </script>
</body>
</html>
```