javascript onmouseout 解决办法


Posted in Javascript onJuly 17, 2010

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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
js实现tab切换效果
Feb 16 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
layui 给数据表格加序号的方法
Aug 20 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 #Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 #Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 #Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 #Javascript
JQUERY获取form表单值的代码
Jul 17 #Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 #Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 #Javascript
You might like
php批量上传的实现代码
2013/06/09 PHP
php页面缓存方法小结
2015/01/10 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
跟老齐学Python之用Python计算
2014/09/12 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
环境科学专业大学生自荐信格式
2013/09/21 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
货车司机岗位职责
2014/03/18 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
《角的度量》教学反思
2016/02/18 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
vue实现在data里引入相对路径
2022/06/05 Vue.js