前端开发者前端开发怎样禁止页面滚动 手游前端开发需要掌握 软件开发前端和后端的区别
首先我们来讲解一下事件冒泡的概念：####事件冒泡：一个事件会顺着他的层级一直往上传，一直传到document上为止，即从盒模型上看是从内到外的过程。
例如：
html 代码
<!DOCTYPE html>
<html lang=”en” onclick=”alert(‘html’)”>
<head>
<meta charset=”UTF-8″>
<title>事件流</title>
<style type=”text/css”>
div {
padding: 100px;
}
</style>
</head>
<body onclick=”alert(‘body’)”>
<div style=”background: #ccc” onclick=”alert(this.style.background)”>
<div style=”background: green” onclick=”alert(this.style.background)”>
<div style=”background: red” onclick=”alert(this.style.background)”>点我！！！</div>
</div>
</div>
</body>
</html>
这段代码中，我给不同的div设置了不同的颜色，并且给每一个div设置一个onclilk，希望他每次点击一下，弹出我所点击的对应区域的背景色。通过预览大家可以看出来，点击红色区域，首先弹出的是红色，关掉弹出框后接着弹出的是绿色，灰色，body，html。为什么会出现这样的bug？很简单，事件冒泡####onclick被最中间的div触发后一直向上级冒泡，最终到html停止。
那么浏览器中有哪些事件会冒泡？
既然有事件冒泡，而且容易出bug，那我们接下来就谈谈如何解决事件冒泡
####取消事件冒泡：event.cancelBubble=true
例如：
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>事件冒泡实例</title>
<style type=”text/css”>
#div1 {
width: 400px;
height: 500px;
background-color: #ccc;
display: none;
}
</style>
</head>
<body>
<input id=”btn” type=”button” value=”显示”></input>
<div id=”div1″></div>
<script type=”text/javascript”>
var oBtn = document.getElementById(‘btn’);
var oDiv = document.getElementById(‘div1’);
oBtn.onclick = function (ev) {
var oEvent = ev || event; //未加之前 事件会冒泡到document上，div会一闪而过
oDiv.style.display = ‘block’;
oEvent.cancelBubble = true;
}
document.onclick = function () {
oDiv.style.display = ‘none’;
}
</script>
</body>
</html>
通过预览大家可以看到点击按钮，div出现，当点击任意地方，div消失，大家可以试着把oEvent.cancelBubble=true;这句注释掉再运行试试看，可以看到点击按钮没有反应。其实并不是没有反应，而是当鼠标点击button后，div很快显示一下，点击之后div的disblock变为block，但是事件立即冒泡到document上，div的display又被改为none。我们使用oEvent.cancelBubble=true;将事件冒泡阻止后，就没有问题了。
兼容性处理：由于IE下无法使用stopPropagation()函数，因此做以下兼容：
html 代码
function stopBubble(e) {
if (e && e.stopPropagation) {
//非IE
e.stopPropagation()
} else {
//IE
window.event.cancelBubble = true
}
}
同时也可以使用jquery来阻止冒泡：
html 代码
$(‘.btn’).on(‘click’, function() {
console.log(‘我是按钮哦！, 时间: ‘ + new Date().getMilliseconds())
return false //阻止事件冒泡传播
})
学会前端开发需要多久 零基础 前端开发视频 视频项目前端开发管理
» 本文来自：前端开发者 » 《前端开发JS事件冒泡解析》
» 本文链接地址：https://www.rokub.com/5433.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册