jquery阻止事件冒泡

elim1發表於2011-08-31
jQuery事件

在使用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>


相關文章