版权声明：原创 https://blog.csdn.net/rambler_designer/article/details/88943466
js事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<script src="js/jquery3.3.1.js"></script>
</head>
<body>
<div class="btn1">
<h2 class="btn2">
<a class="btn3">a</a>
</h2>
</div>
<script>
$(window).ready(function () {
$(".btn1").click(function () {
console.log($(this).val() + "触发事件");
});
$(".btn2").click(function () {
console.log($(this).val() + "触发事件")
});
$(".btn3").click(function () {
console.log($(this).val() + "触发事件");
});
});
</script>
</body>
</html>效果:
分析:
当点击了a标签之后,发现有三行输出,这就是事件的冒泡机制,当点击了a标签,事件会向上冒泡,也就是a的父元素为li,自动触发了li绑定的事件,然后事件在继续往上冒泡,li的父标签div也触发了事件,这就是三次事件的原因
解决方法:
方法一、
在绑定的事件中注入js对象event,event调用stopPropagation();取消冒泡机制,取消li标签冒泡也是同理
<script>
$(window).ready(function () {
$(".btn1").click(function () {
console.log($(this).val() + "触发事件");
});
$(".btn2").click(function () {
console.log($(this).val() + "触发事件")
});
$(".btn3").click(function (event) {
console.log($(this).val() + "触发事件");
event.stopPropagation();
});
});
</script>方法二、
我觉得这个是没啥用的,就是在btn绑定的事件函数体第一行输入return false;
这里的return false,也就是忽略当前函数的语句,直接退出当前函数
如果我给div也绑定了事件,再点击div就不会触发函数
而如果只是取消冒泡,点击div还是会触发函数
效果:
