jQuery阻止同类型事件小结


Posted in Javascript onApril 19, 2013
<!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事件,同时也阻止事件冒泡。
Javascript 相关文章推荐
基于jquery库的tab新形式使用
Nov 16 Javascript
jquery ui对话框实例代码
May 10 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 #Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 #Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 #Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 #Javascript
JQuery 常用方法和事件详细介绍
Apr 18 #Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 #Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 #Javascript
You might like
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
如何将数据从文本导入到mysql
2006/10/09 PHP
理解PHP中的stdClass类
2014/04/18 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
jQuery timers计时器简单应用说明
2010/10/28 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python的re正则表达式实例代码
2018/01/24 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
python 实现超级玛丽游戏
2020/11/25 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
一套VC试题
2015/01/23 面试题
数控专业毕业生求职信范文
2013/09/21 职场文书
酒店管理自荐信
2013/10/23 职场文书
简历自荐信
2013/12/02 职场文书
费用会计岗位职责
2014/01/01 职场文书
大专学生求职自荐信
2014/07/06 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
创先争优承诺书
2015/01/20 职场文书
销售员岗位职责
2015/02/10 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript