JS点击事件的重叠处理（多个点击事件出现冲突）

最近开发遇见了一个这个样的情况，一个button在一个div中，点击buton是一个事件，点击大的div也是一个事件，但是由于button在div中，点击button会把两个事件都执行了，但是我们想点击button的时候不去执行大div的事件。层次如图：

解决方法 ：

　　　　在button的点击事件执行的时候调使用   event.stopPropagation() 方法，具体使用如下代码：

     //点击button的方法
    function clickBtn(event){

        //具体的事件内容。。。。。

        
        stopBubbling(event); 
    }


    function stopBubbling(e) {
        e = window.event || e;
        if (e.stopPropagation) {
            e.stopPropagation();      //阻止事件 冒泡传播
        } else {
            e.cancelBubble = true;   //ie兼容
        }
    }

 

 

 

 

 

 

 

 

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 ps:　　W3CSchoo对stopPropagation的解释