冒泡&阻止冒泡；阻止标签默认行为（以a标签为例）
2021-04-08 11:05:37
## 冒泡与阻止冒泡
### 非IE浏览器用 event.stopPropagation() 来阻止冒泡
```javascript
<div id="div1" style="background-color: slateblue ;width: 100px;height: 100px;">父
<div id="div2" style="background-color: red;;width: 50px;height: 50px;">子</div>
</div>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.onclick = function (event) {
alert(1);
event.stopPropagation() //阻止这个事件的冒泡
};
div1.onclick = function () {
alert(2);
}; // 这个时候点击div2这个子元素，父元素div1也会弹窗，子元素传递给了父元素这就是冒泡
```
## 阻止标签默认行为（以a标签为例）
### 非IE浏览器使用evant.preventDefault
```js
<a href="http://www.baidu.com/" id="testA"
style="width: 100px; height: 200px; background-color: rgb(211, 188, 188);font-size: light;font-style: normal;">百度一下</a>
<script>
var a = document.getElementById("testA");
a.onclick = function (e) {
if (e.preventDefault) {
e.preventDefault();
console.log("已阻止跳转")
} else {
window.event.returnValue == false; //IE浏览器阻止默认行为的方法
}
}
</script>
```