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 相关文章推荐
JQuery写动态树示例代码
Jul 31 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
React路由管理之React Router总结
May 10 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 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中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
Python序列类型的打包和解包实例
2019/12/21 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
python如何查看安装了的模块
2020/06/23 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
共产党员承诺书
2014/03/25 职场文书
先进个人材料怎么写
2014/12/30 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
Nginx配置https的实现
2021/11/27 Servers