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 相关文章推荐
jQuery表格行换色的三种实现方法
Jun 27 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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 Memcache 中实现消息队列
2009/11/24 PHP
探讨:php中在foreach中使用foreach ($arr as &$value) 这种类型的解释
2013/06/24 PHP
php动态函数调用方法
2015/05/21 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
消防安全月活动总结
2015/05/08 职场文书
升学宴祝酒词
2015/08/11 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
 Python 中 logging 模块使用详情
2022/03/03 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers