JS冒泡事件解决方案

来源：互联网发布：淘宝网怎么盈利编辑：程序博客网时间：2024/06/08 11:46

何为冒泡事件。
就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。
消除冒泡事件的方法
阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）

下面的一段代码即可以很好的解释是么是冒泡效果，什么叫消除冒泡效果

<html>        <head>        <title>            阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）        </title>        <meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation"/>        <script type="text/javascript">            function doSomething(obj, evt) {                alert(obj.id);                var e = (evt) ? evt: window.event; //判断浏览器的类型，在基于ie内核的浏览器中的使用cancelBubble                if (window.event) {                    e.cancelBubble = true;                } else {                    //e.preventDefault(); //在基于firefox内核的浏览器中支持做法stopPropagation                    e.stopPropagation();                }            }        </script>    </head>        <body>        <div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">            <p>                This is parent1 div.            </p>            <div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">                <p>                    This is child1.                </p>            </div>            <p>                This is parent1 div.            </p>        </div>        <br />        <div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">            <p>                This is parent2 div.            </p>            <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">                <p>                    This is child2. Will bubble.                </p>            </div>            <p>                This is parent2 div.            </p>        </div>    </body></html>

把代码直接复制后，打开当点击child1时不仅会弹出 child1 对话框还会弹出 parent1

这就是冒泡事件

但是单击chile2只会弹出child2却不会弹出 parent2，这便是应用了阻止冒泡事件的特效的效果.

转自：http://blog.csdn.net/fox123871/article/details/6741243