在jQuery中解决事件冒泡问题

<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>

posted @ 2015-01-18 23:29  刘彦民  阅读(924)  评论(0编辑  收藏  举报