在jQuery中明白什么是事件冒泡
程序员文章站
2024-03-05 15:27:01
...
使用软件：eclipse+谷歌浏览器
1.导入js库:<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
注：${pageContext.request.contextPath}可以直接定位自己的项目名，我的项目名是jquery1,所以定位为:/jquery1
2.
//代码块
<%@ 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.事件冒泡：当我们点击子元素，触发的时事件会传递给父元素，这就是事件冒泡。
这时候为了不让父元素受影响就要阻止冒泡。