js阻止冒泡的方式-完整版
程序员文章站
2022-06-16 09:26:04
...
js阻止冒泡的方式-完整版
直接讲结论：
1.原生js
两种方式绑定事件 onclick 和 addEventListener
阻止冒泡的唯一方式为
var e = window.event || arguments.callee.caller.arguments[0];
e.stopPropagation();
2.jq方式
两种方式绑定事件 $().click(fn) 和 $().on(‘click’,fn)
阻止冒泡的除了用上面的原生方法，还可以
return false;
这里注意只有return false;可以其他不管return什么都没用！！！都没用。。。。
以下为测试方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='./js/jquery.js'></script>
<style type="text/css">
#box1 { width: 300px; height: 300px; background: blueviolet; }
#box2 { width: 200px; height: 200px; background: aquamarine; }
#box3 { width: 100px; height: 100px; background: tomato; }
div { overflow: hidden; margin: 50px auto; }
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script>
function sayBox3(){
// var e = window.event || arguments.callee.caller.arguments[0];
// e.stopPropagation();
console.log('你点了最里面的box');
return false;
}
function sayBox2(a) {
console.log('你点了最中间的box',a);
}
function sayBox1() {
console.log('你点了最外面的box');
}
// 事件监听，第三个参数是布尔值，默认false，false是事件冒泡，true是事件捕获
// document.getElementById('box3').addEventListener('click', sayBox3, false);
// document.getElementById('box2').addEventListener('click', sayBox2, false);
// document.getElementById('box1').addEventListener('click', sayBox1, false);
$('#box1').click(sayBox1);
$('#box2').click(sayBox2);
// $('#box3').click(sayBox3);
$('#box3').on('click',sayBox3);
</script>
</body>
</html>
上一篇： 中文太TMD复杂