【javascript前端】事件冒泡的实际试验及解决方式
2013-05-26 11:48
267 查看
【问题场景】
今日在做一份类似于windows桌面的后台管理程序时遇到了问题。里面有一个开始菜单,点击开始按钮以后需要显示出开始菜单的内容,如下图:
【解说:看到“系统设置,使用指南,关于我们”没有?这就是需要弹出的开始菜单】
但是另外有一个需求,就是除了开始按钮以外,点击任何图标,空白处及任务栏该开始菜单都要自动隐藏。如下图:
问:如何解决?
【方案介绍】
经过百度及google大神的指点,最后将问题的解决方案定为 javascript的事件冒泡及事件冒泡的阻止。
【知识点解析】
事件冒泡是指,在浏览器里面(我只针对IE6,7,8,firefox4.0+及chrome做了测试),一个对象被赋予某个事件(以点击事件为例),假如它的父节点也被赋予事件(假如突同样是点击事件),那么当点击子节点时候,会一次触发子节点的点击事件,父节点的点击事件,这就是事件冒泡,ie系及标准浏览器系对事件冒泡的阻止方式不一样(兼容性问题有出来了),不过用jquery可以用相同方式来阻止事件冒泡---这就是为什么我用jq的原因了,身为懒人实在不想搞兼容性了。下面通过一个例子说明:
【测试用的html代码--jq类库自行导入】
【该代码说明,这里定义了三个div,前两个div及document对象都赋予了点击事件,最后一个div赋予了点击事件及阻止事件冒泡,下面将分别点击三个div看看事件的执行情况,这个demo我用ietester里面的6,7,8及ff及chrome进行了试验,事件执行效果一致】
【运行的界面】
【测试过程】
分别点击div2,div1及红色字样的“阻止事件冒泡”,然后你会看到从里到外依次执行事件(没有阻止冒泡的情况下),阻止冒泡了的话就---事件会在阻止冒泡的那一个对象停止传递。
【结论】
看完这些后还对“如何随意点击其他地方,开始菜单会自动隐藏”的问题感到疑惑吗?在document上面添加一个hide菜单的事件,然后在开始菜单按钮添加一个阻止事件冒泡的事件就ok了。
今日在做一份类似于windows桌面的后台管理程序时遇到了问题。里面有一个开始菜单,点击开始按钮以后需要显示出开始菜单的内容,如下图:
【解说:看到“系统设置,使用指南,关于我们”没有?这就是需要弹出的开始菜单】
但是另外有一个需求,就是除了开始按钮以外,点击任何图标,空白处及任务栏该开始菜单都要自动隐藏。如下图:
问:如何解决?
【方案介绍】
经过百度及google大神的指点,最后将问题的解决方案定为 javascript的事件冒泡及事件冒泡的阻止。
【知识点解析】
事件冒泡是指,在浏览器里面(我只针对IE6,7,8,firefox4.0+及chrome做了测试),一个对象被赋予某个事件(以点击事件为例),假如它的父节点也被赋予事件(假如突同样是点击事件),那么当点击子节点时候,会一次触发子节点的点击事件,父节点的点击事件,这就是事件冒泡,ie系及标准浏览器系对事件冒泡的阻止方式不一样(兼容性问题有出来了),不过用jquery可以用相同方式来阻止事件冒泡---这就是为什么我用jq的原因了,身为懒人实在不想搞兼容性了。下面通过一个例子说明:
【测试用的html代码--jq类库自行导入】
<html> <head> <title></title> <script type="text/javascript" src="/content/scripts/jquery-1.7.1.min.js"></script> </head> <body style="border: 1px solid red; background: green;"> z <div style="width: 400px; height: 500px; background: gray;" id="test1"> 这个是div1 z <div style="width: 200px; height: 100px; background: white; margin: 50px;" id="test2"> 这个是div2 <div id="test3" style="width: 90px; height: 20px; margin: 20px; border:1px solid green; color: red;">阻止事件冒泡。</div> </div> </div> <script type="text/javascript"> $(document.getElementById("test1")).click(function(){ alert("div1的点击事件"); }) ; $(document.getElementById("test2")).click(function(){ alert("div2的点击事件"); }) ; $(document).click(function(){ alert("document的点击事件"); }) ; $("#test3").click(function(event){ alert("下面你看不到其他弹窗事件。"); event.stopPropagation(); return false; }); </script> </body> </html>
【该代码说明,这里定义了三个div,前两个div及document对象都赋予了点击事件,最后一个div赋予了点击事件及阻止事件冒泡,下面将分别点击三个div看看事件的执行情况,这个demo我用ietester里面的6,7,8及ff及chrome进行了试验,事件执行效果一致】
【运行的界面】
【测试过程】
分别点击div2,div1及红色字样的“阻止事件冒泡”,然后你会看到从里到外依次执行事件(没有阻止冒泡的情况下),阻止冒泡了的话就---事件会在阻止冒泡的那一个对象停止传递。
【结论】
看完这些后还对“如何随意点击其他地方,开始菜单会自动隐藏”的问题感到疑惑吗?在document上面添加一个hide菜单的事件,然后在开始菜单按钮添加一个阻止事件冒泡的事件就ok了。
相关文章推荐
- javascript完美解决onMouseOver、onMouseOut冒泡事件方法简单
- 阻止javascript事件冒泡的另一种方式
- javascript事件处理方式之捕获冒泡
- javascript解决多事件冲突的问题(冒泡行为、默认行为)
- JavaScript对象内联函数的使用,对象内部方法和属性的使用,以及事件冒泡的处理方式
- javascript 冒泡 解决过多节点绑定事件的问题
- JQuery中阻止事件冒泡方式及其区别
- javaScript事件捕获和冒泡
- 转:JavaScript事件冒泡简介及应用
- JavaScript事件冒泡简介及应用
- javascript-阻止事件冒泡和事件默认行为
- JavaScript中的事件使用方式解说
- COCOS2D 事件冒泡规律 和 CCMenu一直响应事件的解决办法
- JavaScript的for循环中嵌套一个点击事件的问题解决
- ActiveX异步回调JavaScript(通过事件方式)
- 阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
- 用JavaScript阻止事件冒泡
- Javascript事件模型:事件捕获和事件冒泡
- JavaScript事件处理程序的3种方式
- JavaScript中的5种事件使用方式解说