jquery取消事件冒泡的三种方法(推荐)


Posted in Javascript onMay 28, 2016

1、通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

$("form").bind(

"submit", 


function() { 



return false;


 }

);

2、通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

$("form").bind(

"submit", 


function(event){


event.preventDefault();

}

);

3、通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:

$("form").bind(

"submit", 


function(event){


event.stopPropagation();

}

);

(4)总结

1. 一个事件起泡对应触发的是上层的同一事件

特殊:如果two设置成双击事件,那么在你单击two的时候就会起泡触发one单击的事件

(双击包含单击)。

2. 如果在click事件中,在你要处理的事件之前加上e.preventDefault();

那么就取消了行为(通俗理解:相当于做了个return操作),不执行之后的语句了。

3. e.stopPropagation()只要在click事件中,就不会触发上层click事件。

//如果提供了事件对象,则这是一个非IE浏览器

if ( e && e.stopPropagation )
// 因此它支持W3C的stopPropagation()方法


e.stopPropagation();
else

//否则,我们需要使用IE的方式来取消事件冒泡


window.event.cancelBubble = true;
return false;

以上这篇jquery取消事件冒泡的三种方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
jquery.post用法示例代码
Jan 03 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 #Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 #Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 #Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 #Javascript
jQuery操作动态生成的内容的方法
May 28 #Javascript
javascript 用函数实现继承详解
May 28 #Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 #Javascript
You might like
十天学会php之第九天
2006/10/09 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
小程序实现tab标签页
2020/11/16 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
Python 字符串操作方法大全
2014/03/11 Python
python简单实现基数排序算法
2015/05/16 Python
python win32 简单操作方法
2017/05/25 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Random 在 Python 中的使用方法
2018/08/09 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python当中的array数组对象实例详解
2019/06/12 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
化学实验员岗位职责
2013/12/28 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
人事任命书范本
2015/09/21 职场文书
Python采集壁纸并实现炫轮播
2022/04/30 Python