阻止子元素继承父元素事件

转载的,作者不详。此方法实际上是阻止子元素事件冒泡,达到类似效果。

想要阻止点击#p_cont区域时触发a事件,需要在#p_cont区域内加入阻止事件冒泡的代码,具体实现祥看本文

<div id="p_box" onclick="a()"> 
  <div id=p_cont> 
  </div> 
</div>

#p_box包括#p_cont,当点击#p_box区域任何位置时(包括#p_cont),都会触发a事件。想要阻止点击#p_cont区域时触发a事件,需要在#p_cont区域内加入阻止事件冒泡的代码。 
变成 

<div id="p_box" onclick="a()"> 
    <div id="p_cont" onclick="stopBubble(this.id)"> 
    </div> 
</div> 
function a(){ 
    //这里是a事件的代码 
} 
function stopBubble(e) { 
    if (e && e.stopPropagation) {//非IE浏览器 
      e.stopPropagation(); 
    }else {//IE浏览器 
        window.event.cancelBubble = true; 
    } 
} 

 

posted @ 2016-05-09 15:12  丨丨丨  阅读(575)  评论(0)    收藏  举报