JS 阻止事件冒泡

最新推荐文章于 2023-08-15 10:48:57 发布

名贤集

最新推荐文章于 2023-08-15 10:48:57 发布

阅读量696

点赞数

分类专栏： JavaScript 好文章

本文链接：https://blog.csdn.net/QQ282030166/article/details/20151193

版权

JavaScript 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

好文章

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">

        function clickTest(el, e) {
            alert(el.getAttribute('title'));
            stopBubble(e);
        }

        function stopBubble(e) {
            //判断浏览器是否为IE
            if (e && e.stopPropagation && e.preventDefault) {
                //标准W3C的取消冒泡
                e.stopPropagation();
                //取消默认行为 
                e.preventDefault();
            } else {
                // IE的取消冒泡方式  
                window.event.cancelBubble = true;
                // IE的取消默认行为
                window.event.returnValue = false;
            }
        }
    </script>
</head>
<body>
    <div οnclick="clickTest(this,event)" style="width: 500px; height: 500px; background: red;" title="Big">
        <div οnclick="clickTest(this,event)" style="width: 300px; height: 300px; background: yellow" title="Small"></div>
    </div>
</body>
</html>

如果用户点击了children，他实际是在parent和 children上都引起了点击事件。但是那一个先被执行呢？

这个要看浏览器了，现有两个模型：

捕获：parent -> children

冒泡：children -> parent

任何发生在W3C模型中的事件都是先捕获，一直到达真正发生事件的元素(target element)，然后再冒一次泡。

Web的开发人员可以选择注册一个函数到捕获过程还是冒泡过程。这可以通过addEventListener()函数来实现。如果最后的参数是true，这该函数被注册到捕获过程，如果是false，则被注册到冒泡过程。通俗的说：就是说当一个事件发生后，会从上到下查一遍，一直达到发生事件的最下层元素，这就是捕获。然后反弹，从下往上再走一遍，这时冒泡。在注册函数时，要指明在哪个阶段执行它。

这个方法很好，但IE不支持，火狐支持。