javascript onmouseout 解决办法

  onmouseout 发现它的触发太敏感,当经过层内文字链时,即触发onmousetout事件,功能不能正常显示,经过一番搜索,整理出来,供大家参考。

  1、

  

复制代码 代码如下:

  <script type="text/javascript">

  function test(obj, e) {

    if (e.currentTarget) {

  if (e.relatedTarget != obj) {

   if (obj != e.relatedTarget.parentNode) {

  alert(1);

  }

  }

  } else {

  if (e.toElement != obj) {

  if (obj != e.toElement.parentNode) {

  alert(1);

  }

  }

  }

  }

  </script>

  <div onmouseout="test(this, event)" style="width:100px;height:100px;border:1px #666 solid">

    <span style="margin:5px;width:100%;height:100%;border:1px #ff0000 solid">faddsf</span>  </div>

  2、

  

复制代码 代码如下:

  var LeaveFunext = function(t,f){for(var p in f){t[p]=f[p]} return t};

  var IE = '\v' == 'v';

  var contains = function(wrap,child){

  if(IE) return wrap.contains(child);

  while(child && typeof(child.parentNode) != "undefind"){

  if(wrap == child) return true;

  child = child.parentNode;

  }

  return false;

  };

  var LeaveFun = function(o){

  var _o = typeof o =="string" ? document.getElementById(o) : o;

  return this == window ? new LeaveFun(_o):LeaveFunext(_o, LeaveFun.prototype);

  };

  LeaveFun.prototype = {

  mouseleave : function(fn){

  if(IE){

  this.attachEvent('onmouseleave',fn);

  }else{

  this.addEventListener('mouseout',function(e){

  tar = e.relatedTarget;

  if(!contains(this, tar)){

  fn.call(this);

  }

  }, false);

  }

  return this;

  }

  };

  //调用

  LeaveFun('share_customerdiv').mouseleave(function(){document.getElementById('share_customerdiv').style.display ='none';})

  3、最简单,但在部分系统上会有轻微闪烁。

  

复制代码 代码如下:

  <div style="z-index: 11; " onmouseout="this.style.display='none'" onmouseover="this.style.display='block'" >

  <b class="STYLE19">更多此人的...</b>

  <a class="STYLE8" >留言板</a>

  <a class="STYLE8" >好友</a>

  <a class="STYLE8"></a>

  </div>