阻止子元素继承父元素事件具体思路及实现

复制代码 代码如下:

  <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;

  }

  }