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 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
小程序开发基础之view视图容器
Aug 21 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
OpenLayers实现图层切换控件
Sep 25 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php 无限级 SelectTree 类
2009/05/19 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
extjs form textfield的隐藏方法
2008/12/29 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
Python的动态重新封装的教程
2015/04/11 Python
Python函数返回值实例分析
2015/06/08 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python中安装easy_install的方法
2018/11/18 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
医学实习生自我鉴定
2013/12/12 职场文书
《钱学森》听课反思
2014/03/01 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
Python制作动态字符画的源码
2021/08/04 Python