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阻止冒泡方法 }}