javascript onmouseout 解决办法

所属分类: 网络编程 / JavaScript 阅读数: 630
收藏 0 赞 0 分享
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>
更多精彩内容其他人还在看

JavaScript this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多