开发者社区> 努力滴码农> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

相关文章
JavaScript学习笔记(三),js中的事件,this的使用、表单验证、省市级联下拉框案例
JavaScript学习笔记(三),js中的事件,this的使用、表单验证、省市级联下拉框案例
0 0
简单解析JavaScript的默认事件及如何阻止默认事件
简单解析JavaScript的默认事件及如何阻止默认事件 上篇文章就提到,在JavaScript中提到事件冒泡两个必不可少也要提的就是事件捕获和默认事件,现在来聊一聊什么是默认事件,及如何阻止默认事件。 1.什么是默认事件 顾名思义,默认事件就是默认执行的事件,比如 a标签,点击a标签,页面会自动跳转。如图: 在这里插入图片描述 HTML代码: <form action=""> <input type="submit" id="submit"> <input type="image" src="../../CSS/0421/car.jpg"
0 0
JS案例:基于发布订阅实现的事件消息中心-MessageCenter
JS案例:基于发布订阅实现的事件消息中心-MessageCenter
0 0
两个相同的负载user在一起启动的时候,造成相关接口调用第一次报异常 调用第二次正常 如此反反复复 解决方法;mysql复习、JavaScript HTML BOM和DOM触发监听机制事件
两个相同的负载user在一起启动的时候 造成相关接口调用第一次报异常 调用第二次正常 如此反反复复 解决方法 放掉一个实例个数
0 0
JS精髓中的精髓,事件进阶使用
1.事件监听器 如果要为一个元素添加多个相同的事件,该如何实现呢?这就需要用到另外一种添加事件的方式了,那就是——事件监听器 所谓的“事件监听器”,指的是使用addEventListener()方法为一个元素添加事件,我们又称之为“绑定事件” 案例:
0 0
JS的精髓,事件详解
鼠标单击 单击事件onclick,如点击某个按钮弹出一个提示框。这里要特别注意一点,单击事件不只是按钮才有,任何元素我们都可以为它添加单击事件!
0 0
JavaScript 常用的事件
JavaScript 常用的事件
0 0
正值初夏,了解一下JavaScript事件管理
正值初夏,了解一下JavaScript事件管理
0 0
JavaScript中 Touch 事件详解
JavaScript中 Touch 事件详解
0 0
文章
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载