js 冒泡

js 冒泡

需求场景

点击card有link跳转，card里面又包含别的link跳转。 代码如下：

```
class JSBubble extends Component {
  render() {
    return (
        <div
            className="cardContainer"
            onClick={() => {
              window.open('newLink1', "_blank")
            }}
        >
          <Button
              onClick={() => {
                window.open('newLink2', "_blank")
              }}
          >
            js bubble
          </Button>
          <Link to="newLink3">newLink3</Link>
        </div>
    )
  }
}
```    

这时会发现不管是点击card里面的button还是link最终触发的都是最外层card的newLink1.

知识点

1. window.open([URL], [窗口名称], [参数字符串])

• URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

• 窗口名称：可选参数，被打开窗口的名称。

  (1)该名称由字母、数字和下划线字符组成。

  (2)"_top"、"_blank"、"_self"具有特殊意义的名称。

  _blank：在新窗口显示目标网页

  _self：在当前窗口显示目标网页

  _top：框架网页中在上部窗口中显示目标网页

  (3)相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。

  (4)name 不能包含有空格。

• 参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

2. 捕获与冒泡

• 事件捕获 (网景提出)

  执行顺序(document->html->body->div)

• 事件冒泡 (微软提出)

  执行顺序(div->body->html->document)

• IE < 9：只支持事件冒泡, IE 9+|chrome|firefox|safari：事件冒泡+事件捕获

阻止冒泡

1. event.target

通过 e.target 获取当前点击的element, 从而避免事件的冒泡。

  ```
   <div
       className="cardContainer"
       id="outDiv"
       onClick={(e) => {
           if (e.target.id === 'outDiv') {
               window.open('newLink1', "_blank")
           }
       }}
   >
     <Button
         onClick={() => {
           window.open('newLink2', "_blank")
         }}
     >
       js bubble
     </Button>
     <Link to="newLink3">newLink3</Link>
   </div>
  ```

3. event.stopPropagation() || e.cancelBubble = true;

```
   onClick={(e) => {
       window.open('newLink2', "_blank")
       e.stopPropagation();  //W3C阻止冒泡方法
       e.cancelBubble = true;  //IE阻止冒泡方法
   }}
```