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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
js获取form的方法
May 06 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
vue路由分文件拆分管理详解
Aug 13 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/03/04 PHP
form自动提交实例讲解
2017/07/10 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
Node.js编码规范
2014/07/14 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
vue组件的写法汇总
2018/04/12 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
pytorch梯度剪裁方式
2020/02/04 Python
Python3如何判断三角形的类型
2020/04/12 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
还款承诺书范文
2014/05/20 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
房屋产权证明书
2014/10/15 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
Python 语言实现六大查找算法
2021/06/30 Python
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫