您的位置：首页 > Web前端 > JavaScript

JS阻止冒泡事件和默认事件（IE和其他浏览器兼容）

2016-11-18 10:33 591 查看

冒泡事件：比如我们点击了一个元素然后从它本身开始一层一层向上的父元素都做出反应直到根元素

默认事件：像a标签的点击跳转和页面鼠标右键单击弹出菜单等都是默认事件

我们有时想要阻止这些事件需要注意的是IE浏览器和其他浏览器的兼容问题

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div onclick="show2();">
<button onclick="show1(event)">
按钮
</button>
</div>
<script>
function stopEvent(event){
var e=arguments.callee.caller.arguments[0] || event;//这里是因为除了IE有event其他浏览器没有所以要做兼容
if(window.event){       //这是IE浏览器
e.cancelBubble=true;//阻止冒泡事件
e.returnValue=false;//阻止默认事件
}else if(e && e.stopPropagation){     //这是其他浏览器
e.stopPropagation();//阻止冒泡事件
e.preventDefault();//阻止默认事件
}
}
function show1(ev){
alert(1);
stopEvent(ev);
}
function show2(){
alert(2);
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web前端

相关文章推荐

新的分享

章节导航