JQ 事件冒泡

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冒泡</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 13px;
	line-height: 130%;
	padding: 60px;
}
#content {
	width: 220px;
	border: 1px solid #0050D0;
	background: #96E555
}
span {
	width: 200px;
	margin: 10px;
	background: #666666;
	cursor: pointer;
	color: white;
	display: block;
}
p {
	width: 200px;
	background: #888;
	color: white;
	height: 16px;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	// 为span元素绑定click事件
	$('span').bind("click",function(){
	var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
	});
	// 为div元素绑定click事件
	$('#content').bind("click",function(){
		var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
	});
	// 为body元素绑定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
		$('#msg').html(txt);
	});
})
</script>
</head>
<body>
<div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div>
<div id="msg"></div>
</body>
</html>

效果图：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>停止事件冒泡</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 13px;
	line-height: 130%;
	padding: 60px;
}
#content {
	width: 220px;
	border: 1px solid #0050D0;
	background: #96E555
}
span {
	width: 200px;
	margin: 10px;
	background: #666666;
	cursor: pointer;
	color: white;
	display: block;
}
p {
	width: 200px;
	background: #888;
	color: white;
	height: 16px;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	// 为span元素绑定click事件
	$('span').bind("click",function(event){
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
		event.stopPropagation(); //阻止事件冒泡
	});
	// 为div元素绑定click事件
	$('#content').bind("click",function(event){
		var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
		event.stopPropagation(); //阻止事件冒泡
	});
	// 为body元素绑定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
		$('#msg').html(txt);
	});
})
</script>
</head>
<body>
<div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div>
<div id="msg"></div>
</body>
</html>

效果图：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阻止默认行为</title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("#sub").bind("click",function(event){
	var username = $("#username").val(); //获取元素的值
		if(username==""){ //判断值是否为空
		$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
			event.preventDefault(); //阻止默认行为 ( 表单提交 )
		}
	})
})
</script>
</head>
<body>
<form action="test.html">
    用户名：
    <input type="text" id="username" />
    <br/>
    <input type="submit" value="提交" id="sub"/>
</form>
<div id="msg"></div>
</body>
</html>

效果图：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阻止默认行为 - false</title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("#sub").bind("click",function(event){
		var username = $("#username").val();  //获取元素的值
		if(username==""){     //判断值是否为空
			$("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
			return false;
		}
	})
})
</script>
</head>
<body>
<form action="test.html">
    用户名：
    <input type="text" id="username" />
    <br/>
    <input type="submit" value="提交" id="sub"/>
</form>
<div id="msg"></div>
</body>
</html>

效果图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>停止事件冒泡 - false</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 13px;
	line-height: 130%;
	padding: 60px;
}
#content {
	width: 220px;
	border: 1px solid #0050D0;
	background: #96E555
}
span {
	width: 200px;
	margin: 10px;
	background: #666666;
	cursor: pointer;
	color: white;
	display: block;
}
p {
	width: 200px;
	background: #888;
	color: white;
	height: 16px;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	// 为span元素绑定click事件
	$('span').bind("click",function(event){
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
		return false;
	});
	// 为div元素绑定click事件
	$('#content').bind("click",function(event){
		var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
		return false;
	});
	// 为body元素绑定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
		$('#msg').html(txt);
	});
})
</script>
</head>
<body>
<div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div>
<div id="msg"></div>
</body>
</html>

效果图：

猜你喜欢