阻止事件冒泡兼容处理兼容ie678

最新推荐文章于 2021-09-29 11:58:54 发布

水机.Threeki

最新推荐文章于 2021-09-29 11:58:54 发布

阅读量418

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_41893551/article/details/82623832

JavaScript 专栏收录该内容

44 篇文章

订阅专栏

本文通过一个HTML页面示例，介绍了如何使用JavaScript来处理元素的点击事件，并演示了事件冒泡现象及其如何被阻止的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <style>
        .parent{ border: #ccc solid 1px; width: 100px; height: 100px; padding: 100px; }
    </style>

    <div class="parent">
        <button class="btn" id="btn">点击</button>
    </div>

    <script>
        var btn = document.querySelector('.btn');

        btn.onclick = function(e){
            alert('btn');

            // 兼容ie和标准浏览器
            var e = e || window.event;

            // 判断是否是点击自己
            if ( e.target === this || e.srcElement === this) {
                if (e.stopPropagation) {
                    e.stopPropagation();        // 标准浏览器用的
                } else {
                    e.cancleBubble = false;     // ie6-8 浏览器取消事件冒泡
                }
            }
        };


        var parent = document.querySelector('.parent');
        parent.onclick = function(){
            alert('parent');
        };
    </script>

</body>
</html>