JS中的事件冒泡问题

onMouseOver,onMouseOut,onClick等都存在事件冒泡

比如代码如下:

<div onClick="alert('你点了div');">
<input type="button" value="div中的按钮" onClick="alert('你点了button')" />
</div>

div中有一个button

事实是,当你单击了按钮,div的onClick事件也会执行,不单是这样,所有button的父级对像都会执行onClick包括body, 这显然不是我们想要的.

解决办法:

阻止事件冒泡

function zuzhi(e){
    if (e && e.stopPropagation ) { //如果提供了事件对象，则这是一个非IE浏览器
        e.stopPropagation();
    }else{//否则，我们需要使用IE的方式来取消事件冒泡 
        window.event.cancelBubble = true;
    }
}

上面的代码就成了这样:

<script type="text/javascript">
function zuzhi(e){
if (e && e.stopPropagation ) { //如果提供了事件对象，则这是一个非IE浏览器
 e.stopPropagation();
}else{//否则，我们需要使用IE的方式来取消事件冒泡 
 window.event.cancelBubble = true;
}
}
</script>
 
<div onClick="alert('你点了div');">
<input type="button" value="div中的按钮" onClick="(function(e){alert('你点了button');zuzhi(e);})()" />
</div>

上面说的是onClick事件,子对像阻止了事件冒泡,但要是父对像的事件,子对像触发怎么怎么办泥?

还是拿一个div和一个button打比方:

<div onMouseOver="document.getElementById('msg').innerHTML+='\r我进来了'" onMouseOut="document.getElementById('msg').innerHTML+='\r我出去了'">
    <input type="button" value="按钮" />
</div>
<div id="msg"></div><!--这里只是用记录事件执行的-->

本来很明了的事情也出错了,你会发鼠标移入button上时候先后执行VID的onMouseOut和onMouseOver事件,其了怪了,这管button什么事.这就是事件冒泡.

这时候我也和处理onClick事件一样给button的onMouseOut 和 onMouseOver事件组织事件冒泡:

<script type="text/javascript">
function zuzhi(e){
if (e && e.stopPropagation ) { //如果提供了事件对象，则这是一个非IE浏览器
e.stopPropagation();
 }else{//否则，我们需要使用IE的方式来取消事件冒泡

window.event.cancelBubble = true;
}
}
</script>
<div onMouseOver="document.getElementById('msg').innerHTML+='\r我进来了'" onMouseOut="document.getElementById('msg').innerHTML+='\r我出去了'">
    <input type="button" value="按钮" onMouseOut="(function(e){zuzhi(e);})();"  onMouseOver="(function(e){zuzhi(e);})();" />
</div>
<div id="msg"></div><!--这里只是用记录事件执行的-->

啊哦,问题来了,当鼠标进入button时执行了div的onMouseOut,而鼠标出button时执行了div的onMouseOver,头都大了,怎么办?

实验说明当鼠标进入子标签的一定会执行onMouseOut事件,和子事件冒泡似乎无关了.那怎么解决呢.

在这个情况下我两种方法:

1.给onMouseOut执行语句时加个延迟执行.不阻止子对像的事件冒泡,这样操作简单,可能很多效果本事就会用到延迟执行.

<script type="text/javascript">
  var $in, $out;
  function M_in() {
    clearTimeout($out);
    $in= setTimeout(function() {document.getElementById('msg').innerHTML +='\r我进来了'},100)
  }
  function M_out() {
    clearTimeout($in);
    $out = setTimeout(function() {document.getElementById('msg').innerHTML +='\r我出去了'},100)
  }
</script>
<div onMouseOver="M_in();" onMouseOut="M_out();">
  <input type="button" value="按钮"/>
</div>
<div id="msg">
</div><!--这里只是用记录事件执行的-->

这样改了之后你会发现,无论你把鼠标移进按钮还是移出按钮,执行的都好像只执行了 onMouseOver 事件; 有时候虽然多次执行onMouseOver但关不改变什么,就能用这个方法解决;

 

2.执行时判断事件对像是子对像触发,是就停止执行;

IE和其它浏览器用的方法不一样,所以代码会多一点(经过IE6789,FF,Chrome测试);

<script type="text/javascript">
  function M_out(e) {
    var obj = document.getElementById('fff');
    if (window.event && !e.relatedTarget) {
      if (obj.contains(event.toElement)) {
        return
      }
    } else if (e && e.relatedTarget) {
      if (obj.contains(e.relatedTarget)) {
        return
      }
    };
    document.getElementById('msg').innerHTML += '我出去了<br/>'
  }
  function M_in(e) {
    var obj = document.getElementById('fff');
    if (window.event && !e.relatedTarget) {
      if (obj.contains(event.fromElement)) {
        return
      }
    } else if (e && e.relatedTarget) {
      if (obj.contains(e.relatedTarget)) {
        return
      }
    };
    document.getElementById('msg').innerHTML += '我进来了<br/>'
  }
</script>
<div id="fff" onMouseOver="M_in(event);" onMouseOut="M_out(event);" style="padding:10px; margin:0 auto; width:700px; border:3px solid #00F">
  <input id="bt1" type="button" value="按钮" />
</div>
<div id="msg" style="padding:5px;border:1px solid #00F">
</div><!--这里只是用记录事件执行的-->

说明:mouseover中relatedTarget指向鼠标来自的元素，而mouseout中的relatedTarget指向的是鼠标去向的那个元素。IE中则是toElement和fromElement;

如果直接用JS的事件绑定,判断上会简单很多:

<script type="text/javascript">
  window.onload = function() {
    var obj = document.getElementById("fff");
    var msg = document.getElementById("msg");
    obj.onmouseout = function(e) {
      if (e) {
        if (obj.contains(e.relatedTarget)) {
          return
        }
      } else if (event) {
        if (obj.contains(event.toElement)) {
          return
        }
      };
      msg.innerHTML += '我出去了<br/>'
    }
    obj.onmouseover = function(e) {
      if (e) {
        if (obj.contains(e.relatedTarget)) {
          return
        }
      } else if (event) {
        if (obj.contains(event.fromElement)) {
          return
        }
      };
      msg.innerHTML += '我进来了<br/>'
    }
  }
</script>
<div id="fff" style="padding:10px; margin:0 auto; width:700px; border:3px solid #00F">
  <input id="bt1" type="button" value="按钮" />
</div>
<div id="msg" style="padding:5px;border:1px solid #00F">
</div><!--这里只是用记录事件执行的-->

 

补充

1. 不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。 

2.阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据，这种行为无须我们写程序定制。