jquery阻止事件冒泡

简介: 在使用jquery进行事件处理的时候,当从里到外的多层都响应某一事件,然后又在里层发生该事件时,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>
目录
相关文章
N..
|
26天前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
11 1
|
1月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
12 0
|
1月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
22 1
|
6月前
|
JavaScript 前端开发
前端基础 - JQuery事件切换(原来还有这种写法)
前端基础 - JQuery事件切换(原来还有这种写法)
29 0
|
7月前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
56 0
|
6月前
|
JavaScript 前端开发 索引
Javascript知识【jQuery:数组遍历和事件】
Javascript知识【jQuery:数组遍历和事件】
|
30天前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
10 0
|
1月前
|
JavaScript
jQuery动画与事件概念以及语法
jQuery动画与事件概念以及语法
8 0
|
3月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
39 0
|
3月前
|
JavaScript 前端开发
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
39 0