javascript onmouseout 解決辦法

來源:互聯網
上載者:User

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>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.