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 nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 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 gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
PHP 函数学习简单小结
2010/07/08 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
php 启动报错如何解决
2014/01/17 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
业务助理岗位职责
2013/11/18 职场文书
仓库门卫岗位职责
2013/12/22 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
国培远程培训感言
2014/03/08 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
就业意向书范文
2014/04/01 职场文书
长城英文导游词
2015/01/30 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python