当前位置: 首页 > news >正文

jquery 事件冒泡的介绍以及如何阻止事件冒泡

什么是JS事件冒泡?
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

如何来阻止Jquery事件冒泡?
通过一个小例子来解释
复制代码 代码如下:
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default5.aspx.cs"Inherits="Default5"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Porschev---Jquery事件冒泡</title>
<scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"></script>
</head>
<body>
<formid="form1"runat="server">
<divid="divOne"οnclick="alert('我是最外层');">
<divid="divTwo"οnclick="alert('我是中间层!')">
<aid="hr_three"href="http://www.baidu.com"mce_href="http://www.baidu.com"οnclick="alert('我是最里层!')">点击我</a>
</div>
</div>
</form>
</body>
</html>

比如上面这个页面,
分为三层:divOne是第外层,divTwo中间层,hr_three是最里层;
他们都有各自的click事件,最里层a标签还有href属性。
运行页面,点击“点击我”,会依次弹出:我是最里层---->我是中间层---->我是最外层---->然后再链接到百度.
这就是事件冒泡,本来我只点击ID为hr_three的标签,但是确执行了三个alert操作。
事件冒泡过程(以标签ID表示):hr_three---->divTwo---->divOne。从最里层冒泡到最外层。

如何来阻止?
1.event.stopPropagation();
复制代码 代码如下:
<scripttype="text/javascript">
$(function(){
$("#hr_three").click(function(event){
event.stopPropagation();
});
});
<script>

再点击“点击我”,会弹出:我是最里层,然后链接到百度

2.returnfalse;
如果头部加入的是以下代码
复制代码 代码如下:
<scripttype="text/javascript">
$(function(){
$("#hr_three").click(function(event){
returnfalse;
});
});
<script>

再点击“点击我”,会弹出:我是最里层,但不会执行链接到百度页面

由此可以看出:
1.event.stopPropagation();
事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)
2.returnfalse;
事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)
还有一种有冒泡有关的:
3.event.preventDefault();
如果把它放在头部A标签的click事件中,点击“点击我”。
会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度
它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)


【详细出处参考】http://www.jb51.net/article/32792.htm

 

 

转载于:https://www.cnblogs.com/julin-peng/p/3644049.html

相关文章:

  • Linux认证考试心得:RHCE考试心得
  • 几条sql语句(exists)
  • 做营销,最重要的事是让顾客动起来!
  • WooCommerce代码收集
  • vc系列编译器使用第三方库
  • 好用的视频下载地址
  • 有参数的程序,可以被调用
  • 离开
  • 20个金点子 揭秘IT创新何以源源不断
  • 运维人员需知:最佳日志实践
  • 移植svn trac 及trac错误解答
  • Extjs表单验证小结
  • 从ResultSet获取select count统计结果
  • 学会自重
  • 哈佛图书馆自习室墙上的训言
  • 【刷算法】求1+2+3+...+n
  • ES10 特性的完整指南
  • JavaScript类型识别
  • java中的hashCode
  • JS基础篇--通过JS生成由字母与数字组合的随机字符串
  • js面向对象
  • KMP算法及优化
  • maya建模与骨骼动画快速实现人工鱼
  • MobX
  • Spark in action on Kubernetes - Playground搭建与架构浅析
  • Spring Boot快速入门(一):Hello Spring Boot
  • 从0实现一个tiny react(三)生命周期
  • 聊聊flink的TableFactory
  • 浅谈Kotlin实战篇之自定义View图片圆角简单应用(一)
  • 容器服务kubernetes弹性伸缩高级用法
  • 实现简单的正则表达式引擎
  • 数组大概知多少
  • 一天一个设计模式之JS实现——适配器模式
  • [地铁译]使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • #Linux(权限管理)
  • $forceUpdate()函数
  • $var=htmlencode(“‘);alert(‘2“); 的个人理解
  • (4)logging(日志模块)
  • (Matalb回归预测)PSO-BP粒子群算法优化BP神经网络的多维回归预测
  • (备忘)Java Map 遍历
  • (非本人原创)我们工作到底是为了什么?​——HP大中华区总裁孙振耀退休感言(r4笔记第60天)...
  • (论文阅读23/100)Hierarchical Convolutional Features for Visual Tracking
  • (四)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (转)iOS字体
  • ******之网络***——物理***
  • .babyk勒索病毒解析:恶意更新如何威胁您的数据安全
  • .net php 通信,flash与asp/php/asp.net通信的方法
  • .NET 中让 Task 支持带超时的异步等待
  • .NET开发不可不知、不可不用的辅助类(三)(报表导出---终结版)
  • @Async注解的坑,小心
  • @Conditional注解详解
  • @private @protected @public
  • [ 第一章] JavaScript 简史
  • [ 转载 ] SharePoint 资料
  • [1204 寻找子串位置] 解题报告