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 相关文章推荐
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
小程序实现搜索框功能
Mar 26 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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写入文件不覆盖的实例讲解
2019/09/17 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
加拿大留学自荐信
2014/01/28 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
荒岛余生观后感
2015/06/09 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
js不常见操作运算符总结
2021/11/20 Javascript