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函数
Aug 01 Javascript
setAttribute 与 class冲突解决
Feb 17 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
PHP制作用户注册系统
2015/10/23 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
PHP7 其他修改
2021/03/09 PHP
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
javascript中call和apply的用法示例分析
2015/04/02 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python语言快速上手学习方法
2018/12/14 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
详解python算法常用技巧与内置库
2020/10/17 Python
毕业生个人求职自荐信
2014/02/26 职场文书
培训讲师岗位职责
2014/04/13 职场文书
党风廉设责任书
2014/04/16 职场文书
读书之星事迹材料
2014/05/12 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
租房协议书范例
2014/10/14 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android