JavaScript中事件冒泡问题

湖心亭看雪

于 2015-04-17 22:23:29 发布

643

分类专栏： html+css javascript 文章标签： javascript 事件方法

html+css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中事件冒泡问题

JavaScript中事件冒泡问题问题
复制链接

扫一扫

专栏目录

JavaScript中事件冒泡问题

JavaScript中事件冒泡问题

请看如下代码：

“相关推荐”对你有帮助么？