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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
jquery创建div 实现代码
Apr 27 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 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
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
超全面的javascript中变量命名规则
2017/02/09 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
django迁移数据库错误问题解决
2019/07/29 Python
python 利用zmail库发送邮件
2020/09/11 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
小学生感恩老师演讲稿
2014/08/28 职场文书
2014年转正工作总结
2014/11/08 职场文书
2015年手术室工作总结
2015/05/11 职场文书
单位综合评价意见
2015/06/05 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
Java spring定时任务详解
2021/10/05 Java/Android
python双向链表实例详解
2022/05/25 Python