在jQuery中明白什么是事件冒泡

最新推荐文章于 2022-03-09 19:42:33 发布

疯狂的魔王

最新推荐文章于 2022-03-09 19:42:33 发布

阅读量441

点赞数

分类专栏：其他

本文链接：https://blog.youkuaiyun.com/qq_40936909/article/details/82147154

版权

其他专栏收录该内容

3 篇文章

订阅专栏

博客介绍了在eclipse和谷歌浏览器环境下，导入jQuery库的方法。通过代码示例展示了点击元素时提示弹框的出现顺序，解析了阻止事件冒泡的关键代码。同时解释了事件冒泡的概念，即点击子元素触发的事件会传递给父元素，还说明了阻止冒泡的必要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用软件：eclipse+谷歌浏览器

1.导入js库:<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>

注：${pageContext.request.contextPath}可以直接定位自己的项目名，我的项目名是jquery1,所以定位为:/jquery1

//代码块

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	//jQuery('a',document).click();  在整个文档（document）的a标签里触发点击事件
	jQuery('a',document).click(function(){
		alert('你好');
		return false;//阻止事件冒泡<关键代码>
	});
});
</script>
</head>

<body>
	<hr>
		<div onclick="alert('aaa');">
			<a href="#" onclick="alert('bbb');"><p onclick="alert('ccc');">哈哈，点我</p></a>
		</div>
	<hr>
</body>
</html>

3.解析：点击<哈哈，点我>提示弹框出现顺序为ccc/bbb/你好，若是将return false;//阻止事件冒泡<关键代码>删除后则提示弹框出现顺序为ccc/bbb/你好/aaa。

4.事件冒泡：当我们点击子元素，触发的时事件会传递给父元素，这就是事件冒泡。

这时候为了不让父元素受影响就要阻止冒泡。