Javascript 事件propagation机制-阿里云开发者社区

开发者社区> 开发者小助手-bz5> 正文

Javascript 事件propagation机制

简介: Javascript 事件propagation机制
+关注继续查看

Created by Jerry Wang, last modified on Oct 10, 2014

测试代码:

</div><div data-lake-id="fbb43b4dd756729699498fc5a418be63">

</div><div data-lake-id="5fb1ccc531cde16c52996898546051e8">$(document).ready(function() {</div><div data-lake-id="9dfa88df1b6b9883b495691068c07cec"> $("#test").click( function (){</div><div data-lake-id="8754b97832d967b62d6659f6db6309ef"> alert("four");</div><div data-lake-id="a77db0f2b042185e7dba0e1d0b465f12"> //return false;</div><div data-lake-id="926a13941e9c4cb33bc69f1d8f429231"> });</div><div data-lake-id="45826a8bfad6e76bc3ce53828b44a035">});</div><div data-lake-id="2bed17e1beb5210c545c75ceb9055c9b">function iamtwo(e) {</div><div data-lake-id="18d7c3bb02da404d358d56e7723783ea">  alert("two");</div><div data-lake-id="ed0fde0c675f9127fc20b101f40391ff">  //stopBubble(e);</div><div data-lake-id="9a9054e929b34ff8c1f542a2b9a96052">}</div><div data-lake-id="a50cbb73216f50f07d23ae1d7803e427">function iamthree(e) {</div><div data-lake-id="70c085d327ab35ca5f7b3148b759895c">  alert("three");</div><div data-lake-id="301c8b68ef6b0b9fda2a983382184ae9">  //stopBubbleDefault(e);</div><div data-lake-id="38f2b13cbc08eb80357902ed3c5e0ee0">}</div><div data-lake-id="2b5774fe54360f7e0d05893f829c518b">function stopBubble(e) {</div><div data-lake-id="6c478ff009453c172f545b623ce77965">    var evt = e||window.event;</div><div data-lake-id="16f6d19a83af46a3f357b8229e51f036">    evt.stopPropagation?evt.stopPropagation():( evt.cancelBubble = true );</div><div data-lake-id="e8306b07bfbe9465866fef75e828ef2d">}</div><div data-lake-id="f4d2a3e0010011492f4167099f7e36cf">function stopBubbleDefault(e) {</div><div data-lake-id="e8606ddccfda7974026b93ba713be2b7">    var evt = e||window.event;</div><div data-lake-id="82a01436158bba976334d474d6641079">    evt.stopPropagation?evt.stopPropagation():( evt.cancelBubble = true );</div><div data-lake-id="cd05fade227a17ed7f9a8ddeec3542a9">    evt.preventDefault();</div><div data-lake-id="7370019b7eb72fab82666cdc61aa7394">}</div><div data-lake-id="a8af68638b1352d3349dcf3a5d52b609">

Outermost

 

middle

   

inner

 

two

 

http://www.baidu.com" οnclick="iamthree(event)">three

 

http://www.baidu.com">four

UI上有6个元素:


image.png

点击Outermost: 弹出outermost字样的alert dialog

点击middle: 依次弹出middle,outermost的dialog

点击inner: 依次弹出inner, middle,outermost的dialog

点击two: 依次弹出two, middle,outermost的dialog

点击three: 依次弹出three, middle,outermost的dialog, 然后navigate到baidu webpage

点击four: 依次弹出four, middle,outermost的dialog, 然后navigate到baidu webpage

如果不希望two元素点击的event 冒泡到其parent hierarchy去,可将click handler iamtwo里的stopBubble行注释取消,之后点击就只会出现two dialog:


image.png

对于tag a 元素three,如果要阻止浏览器navigate到baidu website这一默认行为,需要调用event的preventDefault()方法:


image.png

如果是采用jQuery的click方法绑定的事件处理,只需在事件处理函数里返回false即可:

image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9945 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12060 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13692 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9130 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4640 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4436 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22334 0
2497
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载