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基本编码模式小结
May 23 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
javascript数组的定义及操作实例
Nov 10 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改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
php绘制一条弧线的方法
2015/01/24 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
总结Python编程中函数的使用要点
2016/03/20 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
时尚休闲吧创业计划书
2014/01/25 职场文书
学生操行评语大全
2014/04/24 职场文书
科技节口号
2014/06/19 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
入党团支部推荐意见
2015/06/02 职场文书
酒店员工管理制度
2015/08/05 职场文书