JavaScript中事件冒泡问题

来源：互联网发布：重庆软件外包公司编辑：程序博客网时间：2024/06/06 01:30

JavaScript中事件冒泡问题

问题：在JavaScript中，如果一个子节点有onmouseover()监听事件，而其父节点也有一个onmouseover()监听事件，你会发现当你将鼠标放在子节点上时，不光子节点的onmouseover方法执行了，其父节点的onmouseover方法也执行了。那么怎么样才能让鼠标位于子节点上时，其父节点的onmouseover方法不执行呢？

请看如下代码：

<!DOCTYPE HTML><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>JS事件冒泡</title><style type="text/css">    div *{margin:5px; padding:5px; border:3px solid white; display:block;}    textarea{margin:15px; width:1000px; height:50px;}    ul{background-color:#00A2E8}    li{background-color:#22B14C;}    a{background-color:#FFC90E;}    span{background-color:#000000;}</style></head><body><h1>Bubble in JavaScript</h1><p>DOM树的结构:</p><pre>    <code>        ul            -li                -a                    -span    </code></pre><p>一.不停止冒泡</p><div>    <ul>        <li>            <a href="#"><span>Bubble!!!!!</span></a>        </li>        <li>            <a href="#"><span>Bubble!!!!!</span></a>        </li>    </ul></div><p>二.停止冒泡</p><div>    <ul>        <li>            <a href="#"><span>Don't Bubble!!!!!</span></a>        </li>        <li>            <a href="#"><span>Don't Bubble!!!!!</span></a>        </li>    </ul></div><textarea id="textarea_log"></textarea><script type="text/javascript">window.onload = function(){    var textarea_log = document.getElementById("textarea_log");    var all_1 = document.getElementsByTagName("div")[0].getElementsByTagName("*");    for(var i=0;i<all_1.length;i++){        all_1[i].onmouseover = function(e){            this.style.border ="3px solid red";            textarea_log.value = "鼠标现在进入的是："+this.nodeName;        };        all_1[i].onmouseout = function(e){            this.style.border = "3px solid white";            textarea_log.value = "";        };    }    var all_2 = document.getElementsByTagName("div")[1].getElementsByTagName("*");    for(var i=0;i<all_2.length;i++){        all_2[i].onmouseover = function(e){            this.style.border = "3px solid red";            if(e){                e.stopPropagation();            }else{                window.event.cancelBubble = true;            }            textarea_log.value = "鼠标现在进入的是:"+this.nodeName;        };        all_2[i].onmouseout = function(e){            this.style.border = "3px solid white";            textarea_log.value = "";        };    }}</script></body></html>

我的Demo代码里面展示了两种情况。设置事件不冒泡的代码：

if(e){e.stopPropagation();}else{    window.event.cancelBubble = true;}

0 0