前端开发怎样禁止页面滚动 手游前端开发需要掌握 软件开发前端和后端的区别
首先我们来讲解一下事件冒泡的概念:####事件冒泡:一个事件会顺着他的层级一直往上传,一直传到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
评论前必须登录!
注册