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 CSS画图之基础篇
Jul 29 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
小程序转发探索示例
Feb 19 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
Python中常用的内置方法
2019/01/28 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Django values()和value_list()的使用
2020/03/31 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
小学运动会演讲稿
2014/08/25 职场文书
财会专业大学生求职信
2014/09/26 职场文书
基层党组织整改方案
2014/10/25 职场文书
2015年党性分析材料
2014/12/19 职场文书
通知函的格式
2015/04/27 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
企业安全生产规章制度
2015/08/06 职场文书
班主任培训研修日志
2015/11/13 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
JavaScript组合继承详解
2021/11/07 Javascript
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python