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