阻止事件冒泡

最新推荐文章于 2025-12-31 17:15:11 发布

原创最新推荐文章于 2025-12-31 17:15:11 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

本文解释了JavaScript中事件冒泡现象，通过HTML和JS代码示例展示了默认情况下事件如何从子元素向上冒泡。并介绍了如何使用stopBubble函数阻止事件冒泡，以及何时在动态应用中需要考虑阻止事件冒泡，如处理键盘和鼠标事件。

在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。

例如如下代码：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} </style> </head> <body> <div id="obj1" style=" width:500px; height:500px; background:#000;"> <div id="obj2" style="width:400px; height:400px; background:red;"></div> </div> <script type="text/javascript"> var obj1 = document.getElementById('obj1'); var obj2 = document.getElementById('obj2'); obj1.onclick = function(){ alert('我点击了obj1'); } obj2.onclick = function(e){ alert('我点击了obj2'); } </script> </body> </html>

运行结果会出来两个，我点击了obj2和我点击了obj1！如何防止事件冒泡呢？在通常情况下，我们只希望事件发生在它的目标而并非它的父级元素上，只需加个stopBubble方法，即可取消事件冒泡，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
</style>
</head>
<body>
<div id="obj1" style=" width:500px; height:500px; background:#000;">
    <div id="obj2" style="width:400px; height:400px; background:red;"></div>
</div>
<script type="text/javascript">
    //阻止事件冒泡的通用函数
    function stopBubble(e){
        // 如果传入了事件对象，那么就是非ie浏览器
        if(e&&e.stopPropagation){
            //因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
        }else{
            //否则我们使用ie的方法来取消事件冒泡
            window.event.cancelBubble = true;
        }
    }

    var obj1 = document.getElementById('obj1');
    var obj2 = document.getElementById('obj2');
    obj1.onclick = function(){
        alert('我点击了obj1');
    }
    obj2.onclick = function(e){
        alert('我点击了obj2');
        stopBubble(e);
    }
</script>
</body>
</html>

现在你可能想知道，什么时候需要阻止事件冒泡？事实上，现在绝大多数情况下都可以不必在意它。但是当你开始开发动态应用程序（尤其是需要处理键盘和鼠标）的时候，就有这个必要了。