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 相关文章推荐
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
微信小程序 标签传入数据
May 08 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
antd table按表格里的日期去排序操作
Nov 17 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
IIS6的PHP最佳配置方法
2007/03/19 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
Jquery ui css framework
2010/06/28 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python贪吃蛇游戏编写代码
2020/10/26 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python构建深度神经网络(续)
2018/03/10 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
澳大利亚百货公司:David Jones
2018/02/08 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
值传递还是引用传递
2015/02/08 面试题
升旗仪式演讲稿
2014/05/08 职场文书
人民调解协议书范本
2014/10/11 职场文书
技术支持岗位职责
2015/02/13 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
python前后端自定义分页器
2022/04/13 Python