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判断元素是否存在的问题示例探讨
Jul 21 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
基于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下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
js导出txt示例代码
2014/01/14 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
js实现导航跟随效果
2018/11/17 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
Apache如何部署django项目
2017/05/21 Python
详解Python中where()函数的用法
2018/03/27 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Python Web版语音合成实例详解
2019/07/16 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Python3列表List入门知识附实例
2020/02/09 Python
Python urllib2运行过程原理解析
2020/06/04 Python
Farnell德国:电子元器件供应商
2018/07/10 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
办公室内勤岗位职责范本
2013/12/09 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
工程负责人任命书
2014/06/06 职场文书
大学团日活动总结书
2015/05/11 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis