stopPropagation组织冒泡

stopPropagation组织冒泡

by kixi

HTML

<div id='kixi-1' style='padding:10px;'>
    <div id='kixi-2' style='width:260px;padding:10px;color:#fff;'> 
        没有阻止冒泡
        <div id='kixi-3' style='width:200px;height:100px;padding:10px;'>
            阻止冒泡了
        </div>
    </div>
</div>

CSS

/*
清晰网
kixi.com.cn
从javascript开始
*/
#kixi-1{background-color:red;}
#kixi-2{background-color:blue;}
#kixi-3{background-color:green;}

JavaScript

var k1 = document.getElementById("kixi-1");
var k2 = document.getElementById("kixi-2");
var k3 = document.getElementById("kixi-3");

function kixi_alert(e){
    alert("清晰网1111");
}

//没有阻止冒泡
function kixi_alert1(e){
    alert("清晰网2222");
}

//阻止冒泡
function kixi_alert2(e){
    event.stopPropagation();
    alert("清晰网33333");
}

k1.addEventListener("click",kixi_alert,false);
k2.addEventListener("click",kixi_alert1,false);
k3.addEventListener("click",kixi_alert2,false);