在jQuery中解决事件冒泡问题

最新推荐文章于 2024-07-24 11:09:48 发布

weixin_30920513

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量67

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liuyanmin/p/5146542.html

版权

<pre name="code" class="html">事件会按照DOM层次结构像水泡一样不断向上直至顶端

解决方法:在事件处理函数中返回false，会对事件停止冒泡。
还可以停止元素的默认行为。例如：可以阻止a标签的提交

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件冒泡</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(function (){
		/**
		 * 事件会按照DOM层次结构像水泡一样不断向上直至顶端
		 * 解决方法:在事件处理函数中返回false，会对事件停止冒泡。
		 * 还可以停止元素的默认行为。例如：可以阻止a标签的提交
		 */
		$("body").click(function (){
			alert("body");
		});
		$("div").click(function (){
			alert("div");
			return false;
		});
		$("span").click(function (){
			alert("span");
			return false;
		});
	});
</script>
</head>
<body>
	<div style="width:400px;height:100px;background:#CCC;">
		<span style="margin:auto;width:200px;height:50px;background:yellow;">事件冒泡</span>
	</div>
</body>
</html>

转载于:https://www.cnblogs.com/liuyanmin/p/5146542.html

weixin_30920513

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在jQuery中解决事件冒泡问题

<pre name="code" class="html">事件会按照DOM层次结构像水泡一样不断向上直至顶端解决方法:在事件处理函数中返回false，会对事件停止冒泡。还可以停止元素的默认行为。例如：可以阻止a标签的提交<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://...
复制链接

扫一扫