【javascript前端】事件冒泡的实际试验及解决方式

来源：互联网发布：spf最短路径算法编辑：程序博客网时间：2024/06/05 12:39

【问题场景】

今日在做一份类似于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了。