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如何取消事件冒泡
Sep 23 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
实例分析javascript中的异步
Jun 02 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
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
做一个有道德的人演讲稿
2014/05/14 职场文书
出纳岗位职责
2015/01/31 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
农村婚庆主持词
2015/06/29 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
JavaScript流程控制(循环)
2021/12/06 Javascript