【JQuery】阻止同类型事件

2013-04-21 | 发布者: 本站| 查看: 759|

<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div style="height:300px;background-color:red;" id="red">
<div style="height:200px;background-color:green;" id="green">
</div>
</div>
</body>
</html>
 
上面的HTML中,red元素是green元素的父元素。
 
$(function(){
$("#green").click(function(event){
alert("green click1");
});
$("#green").click(function(event){
alert("green click2");
});
$("#red").click(function(event){
alert("red click");
});
});
 
js代码给red元素和green元素添加了三个click事件。
 

当点击子元素green元素时,会依次执行green click1、green click2、red click事件。


 

事件追加:点击green元素会依次执行green click1、green click2两个事件(同一元素的同类型事件)。 

事件冒泡:点击green元素会触发父元素的red click事件(父级元素的同类型事件)。


 

1、 在子元素事件函数中阻止事件冒泡

方法1:event.stopPropagation()

$(function(){

$("#green").click(function(event){

event.stopPropagation();

alert("green click");

});

$("#red").click(function(event){

alert("red click");

});

});

 

方法2:return false

 

$(function(){

$("#green").click(function(event){

alert("green click");

return false;

});

$("#red").click(function(event){

alert("red click");

});

});

 

通过上面的两种方法,点击子元素green区域后,red click事件被阻止不再执行。但不会影响red元素其他区域的点击。

 

二者区别:

return false相当于event.preventDefault()+event.stopPropagation()。

 

2、 在父元素事件函数中阻止事件冒泡

$(function(){

$("#green").click(function(event){

alert("green click");

});

$("#red").click(function(event){

if(event.target == this)

{

alert("red click");

}

});

});

 

通过if(event.target== this)判断点击的目标元素是不是red元素本身,如果不是red本身而是它的子元素green元素,则不会执行if内的代码。


 

3、 阻止事件追加

以上的方法只能阻止事件冒泡(也就是父级元素的同类型事件),但不能阻止事件追加(同一元素的同类型事件)。

$(function(){

$("#green").click(function(event){

event.stopImmediatePropagation();

alert("green click");

});

$("#green").click(function(){

alert("green click2");

});

});

event.stopImmediatePropagation()不但可以阻止green click2事件,同时也阻止事件冒泡

上一篇:【JQuery】图片在线截取 下一篇:【SQL】数据首字母按英文查询
更多

咨询热线:18680769880

Copyright © 巴适网络 All Rights Reserved 版权声明 渝ICP备15005483号-1

重庆网络营销|重庆移动互联网营销|重庆微营销|重庆微服务|重庆云广告|重庆云商场|重庆微官网

巴适在线
【电话】18523625039
【电话】18680769880
【售前1】 巴适网络 838922836
【售前2】 巴适网络 421643133
【售前3】 巴适网络 952056566
【售后1】 巴适网络 493434274
【售后2】 巴适网络 421643133
【地址】 (深圳市宝安区)
【巴适网络】
【www.bashinet.com】