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 相关文章推荐
javascript语句中的CDATA标签的意义
May 09 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
webpack常用构建优化策略小结
Nov 21 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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
用php+mysql一个名片库程序
2006/10/09 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
热点新闻滚动特效的js代码
2013/08/17 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
详解Django中Request对象的相关用法
2015/07/17 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
全民健身日活动方案
2014/01/29 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
团支部推优材料
2014/05/21 职场文书
暂住证证明
2015/06/19 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL