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阻止冒泡方法 ??}}```js 冒泡
原文地址：https://www.cnblogs.com/simply-yu/p/9136629.html