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 相关文章推荐
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
理解JavaScript事件对象
Jan 25 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
基于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
php学习之流程控制实现代码
2011/06/09 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python类参数self使用示例
2014/02/17 Python
Python pickle模块用法实例分析
2015/05/27 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
python之随机数函数的实现示例
2020/12/30 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
美德少年事迹材料
2014/01/23 职场文书
活动总结报告格式
2014/05/09 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
Go语言编译原理之变量捕获
2022/08/05 Golang