关于js中的事件冒泡和事件捕获问题

最新推荐文章于 2023-03-24 10:58:23 发布

qq_251025116

最新推荐文章于 2023-03-24 10:58:23 发布

阅读量278

点赞数

分类专栏： js 文章标签： html web前端 javascript

本文链接：https://blog.csdn.net/qq_24882601/article/details/55252354

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这两天我发现一个我理解事件冒泡的一个误区，其实事件冒泡指的是父元素和子元素同时绑定了点击事件，如果你不阻止冒泡的话，当你点击父元素是就只会触发父元素的事件，但是当你点击子元素的时候，他就会触发两个事件，举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <style>  	
    </style>
</head>
<body>
		<div id="div1">1
			<div id="div2">2</div>
		</div>
</body>
<script>
$(function(){
	$("#div1").click(function() {		
		alert("我是父元素");
	});
	$("#div2").click(function() {		
		alert("我是子元素");
	});
})
</script>
</html>

当你点击div1的时候，只会弹出“我是父元素”，但是当你点击div2的时候，就会弹出“我是子元素”，“我是父元素”两条信息，这就是事件冒泡，其实事件冒泡分为两个阶段，一个是事件捕获，另一个就是事件冒泡，事件捕获的时候是从父元素向下捕获的，而事件冒泡是从子元素向上冒泡的，那么我想点击div2的时候就只弹出“我是子元素“而不弹出“我是父元素要怎么办呢，这时候就要用到阻止冒泡事件，只需要把代码改成：

$(function(){$("#div1").click(function() {alert("我是父元素");});$("#div2").click(function(e) {var e=e||event;e.stopImmediatePropagation();alert("我是子元素");});

就可以了，stopImmediatePropagation方法既能阻止事件的捕获过程也能阻止事件的捕获过程，当然还有return false和stopPropagation这两种方法，但是都没有这个的效果这里只有两个div，如果有多个div怎么办呢？方法一样，只需要在最外层div的下一个div（也就是他的子元素，注意不是孙子）加上e.stopImmediatePropagation()就行了。
之前我的理解误区是什么呢？比如说：

<div id="div1">1  
            <div id="div2">2  
                   <div id="div3">3</div>  
            </div>  
        </div>

这里有三个div，我以为阻止冒泡就是给div1加一个事件，点击div2和div3的时候都不会触发div1的事件，这。。。所以这里就要注意了，事件冒泡事件冒泡，肯定指的是多个事件啊，一个事件他怎么去冒，在说了，div2和div3本来就是包含在div1里面的，点击div2和div3就相当与于点击了div1，所以你是没有办法阻止的，除非你把你的布局改一下，不要让div2和div3包含在div1里面，这样自然不会触发了。

qq_251025116

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于js中的事件冒泡和事件捕获问题

这两天我发现一个我理解事件冒泡的一个误区，其实事件冒泡指的是父元素和子元素同时绑定了点击事件，如果你不阻止冒泡的话，当你点击父元素是就只会触发父元素的事件，但是当你点击子元素的时候，他就会触发两个事件，举个例子： Document 1 2 $(function(){ $("#div1").click(funct
复制链接

扫一扫