js阻止事件冒泡、捕获和默认事件行为
2020-12-08 本文已影响0人
不退则进_笑
1,防止冒泡和捕获
- w3c 的方法是 e.stopPropagation()
- IE 是使用 e.cancelBubble = true
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<div id='box1' onClick=alert('box1点击事件')>
<h2>box1盒子</h2>
<div id='box2'>
<h3>
box2盒子
</h3>
</div>
</div>
</head>
<body>
<script>
var box2 = document.getElementById('box2')
box2.onclick = function(e) {
alert('box2点击事件');
var event = e||window.event;
event.cancelBubble ? event.cancelBubble = true : event.stopPropagation();
}
</script>
</body>
</html>
2,默认事件
1，什么是默认事件：
- a 标签 href 属性上的跳转
- 鼠标右键呼出菜单
- form 表单里 button 标签和 type 属性为 submit 的 input 标签的提交
2，取消默认事件
- w3c 的取消默认事件方法是 e.preventDefault()
- IE9 以下是使用 e.returnValue = false
1）a 标签默认时间的取消
document.getElementById('aaa').onclick =
function(e){
var event = e || window.event
if(e.preventDefault){
e.preventDefault()
} else {
event.returnValue = false
}
}
2) 右键呼出菜单默认事件的取消
document.oncontextmenu = function(e){
var event = e || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
event.returnValue = false;
}
}
3）表单的默认事件——提交事件的取消
document.getElementsByClassName(“user-info”)[0].onsubmit = function(e){
var event = e || window.event;
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
3,return false
- return false 只能阻止默认行为，不阻止默认冒泡。但是 jquery 的 return false 既能阻止默认行为，也能阻止冒泡
1）原生 JS，只阻止默认行为，不阻止冒泡
<div onclick=alert('222')>
box1
<div onclick=alert('111')>
box2
<a id="aaa" href="https://www.baidu.com/">百度</a>
</div>
</div>
<script>
document.getElementById('aaa').onclick = function(){
return false
}
</script>
2)jQ，既阻止默认行为，也阻止冒泡
<div onclick=alert('222')>
box1
<div onclick=alert('111')>
box2
<a id="aaa" href="https://www.baidu.com/">百度</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$("#aaa").on('click',function(){
return false;
});
</script>
在使用 return false 过程中发现，如果使用
// return false起了阻止默认事件行为
<script>
document.getElementById('aaa').onclick = function(){
return false
}
</script>
// return false没有起作用
document.getElementById('aaa').addEventListener('click', function () {
return false
})
