`
234390216
  • 浏览: 10197870 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
博客专栏
A5ee55b9-a463-3d09-9c78-0c0cf33198cd
Oracle基础
浏览量：461045
Ad26f909-6440-35a9-b4e9-9aea825bd38e
springMVC介绍
浏览量：1772195
Ce363057-ae4d-3ee1-bb46-e7b51a722a4b
Mybatis简介
浏览量：1395824
Bdeb91ad-cf8a-3fe9-942a-3710073b4000
Spring整合JMS
浏览量：394026
5cbbde67-7cd5-313c-95c2-4185389601e7
Ehcache简介
浏览量：678377
Cc1c0708-ccc2-3d20-ba47-d40e04440682
Cas简介
浏览量：529431
51592fc3-854c-34f4-9eff-cb82d993ab3a
Spring Securi...
浏览量：1179021
23e1c30e-ef8c-3702-aa3c-e83277ffca91
Spring基础知识
浏览量：462663
4af1c81c-eb9d-365f-b759-07685a32156e
Spring Aop介绍
浏览量：150314
2f926891-9e7a-3ce2-a074-3acb2aaf2584
JAXB简介
浏览量：66981
社区版块
存档分类
最新评论

jquery阻止事件冒泡

jquery event stop 事件冒泡 阻止 
阅读更多

在使用jquery进行事件处理的时候，当从里到外的多层都响应某一事件，然后又在里层发生该事件时，jquery默认是会从里到外依次响应各个事件的，然而有时候这并不是我们所需要的。这个时候就需要我们来阻止外层事件的发生，阻止冒泡。

jquery中可以用来阻止事件冒泡的主要有两种，stopPropagation()和return false

 

 

如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
		#inner {
			height: 100px;
			background: #cfc;
		}
		#middler {
			background: #ccf;
		}
		#outer {
			background: #fcc;
		}
		div {
			border: 1px solid blue;
			padding: 20px;
			width: 200px;
		}
	</style>
	<script type="text/javascript" src="/tiantian/js/jquery-1.5.js"></script>
	<script type="text/javascript">
		$(function() {
			$("div").click(function(event) {
				alert($(this).attr("id"));//这样在点击inner的时候会从里到外依次响应其点击事件，依此弹出inner,middler,outer
				//return false;//这样则会阻止其默认行为，阻止事件不再冒泡，这样就只会弹出inner
				event.stopPropagation();//阻止事件冒泡
			});
		});
	</script>
  </head>
  
  <body>
    <div id="outer">
    	最外层
    	<div id="middler">
    		中间层
    		<div id="inner">最里层</div>
    	</div>
    </div>
  </body>
</html>
0
顶
0
踩
分享到：
| 使用javaMail收邮件 支持附件下载
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics