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 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
微信小程序实现时间进度条功能
Nov 17 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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环境――Appserv
2006/12/13 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
JavaScript 学习笔记之操作符
2015/01/14 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
python tkinter界面居中显示的方法
2018/10/11 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
python实现同一局域网下传输图片
2020/03/20 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
历史学专业推荐信
2013/11/06 职场文书
学校安全检查制度
2014/01/27 职场文书
开学典礼策划方案
2014/05/28 职场文书
爱心捐书活动总结
2014/07/05 职场文书