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创建和操作表格的函数集合
May 07 Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
Vue实现简单计算器
Jan 20 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
js中关于String对象的replace使用详解
2011/05/24 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
Vue2几种常见开局方式详解
2017/09/09 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
Python截图并保存的具体实例
2021/01/14 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
毕业生简历自我评价范文
2014/04/09 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
2015国庆节感想
2015/08/04 职场文书
《将心比心》教学反思
2016/02/23 职场文书
小学作文之描写天气
2019/08/15 职场文书