事件冒泡

最新推荐文章于 2025-09-27 18:16:05 发布

原创最新推荐文章于 2025-09-27 18:16:05 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

浏览器上事件天生的一个特点：事件流
事件冒泡：由里向外逐级触发。
事件捕获：由外向里逐级触发。

            阻止事件冒泡 浏览器兼容问题
            事件对象的属性和方法
            cancelBubble=true     stopPropagation()

在这里插入图片描述

var aDivs = document.getElementsByTagName("div");
            for(var i=0;i<aDivs.length;i++){
                aDivs[i].onclick = function(ev){
                    var e = ev || window.event;
                    alert(this.id);

                    stopBubble(e);
                    // e.cancelBubble = true;
                    // e.stopPropagation();
                }
            }
            //封装跨浏览器兼容的阻止事件冒泡
            function stopBubble(e){
                //e 是事件对象
                if(e.stopPropagation){
                    e.stopPropagation();
                }else{
                    e.cancelBubble = true;
                }
            }