事件冒泡

事件冒泡：如果一个元素的某个事件被触发了，那么他的所有的父级元素只要绑定了同类的事件，都会被触发。事件冒泡一直存在，前端新手刚接触这个概念时可能会有点蒙，好像没碰到这种情况呀，之所以没碰到过，是因为之前没有给触发事件的元素的父元素设置同样的事件。 标题 .one { width: 200px; height: 200px; background-color: pink; } .son { width: 100px; height: 100px; background-color: green; position: absolute; left: 250px; top: 250px; }

我是一个粉色的div

我是绿色盒子哈哈哈哈

var box = document.getElementById("box"); var btn = document.getElementById("btn"); var son = document.getElementById("son"); document.onclick = function () { alert("document"); } document.body.onclick = function () { alert("我是body"); } box.onclick = function (e ) { console.log("我是div); } btn.onclick = function () { alert("我是按钮btn."); } son.onclick = function () { alert("我是绿色的盒子"); }js有专门的阻止冒泡事件方式 //e.stopPropagation(); //ie8及以前不支持。 //e.cancelBubble = true; //ie8及以前支持 function stopPropagation(e){ //兼容性处理 e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); }else { e.cancelBubble = true; } } //调用封装的函数进行阻止冒泡测试 btn.onclick = function () { e.stopPropagation(); alert("我是按钮btn."); } son.onclick = function () { e.stopPropagation(); alert("我是绿色的盒子"); }