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 相关文章推荐
JSON JQUERY模板实现说明
Jul 03 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
JS高级运动实例分析
Dec 20 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
Vuex 入门教程
Jan 10 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
深入理解事件冒泡(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
更改localhost为其他名字的方法
2014/02/10 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
jquery实现图片预加载
2015/12/25 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
基于AngularJS实现表单验证功能
2017/07/28 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
Python读写unicode文件的方法
2015/07/10 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
Python函数式编程
2017/07/20 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
Etam德国:内衣精品店
2019/08/25 全球购物
Java语言的优势
2015/01/10 面试题
制冷与电控专业应届生求职信
2013/11/11 职场文书
银行学习十八大感想
2014/01/11 职场文书
购房意向书范本
2014/04/01 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript