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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
jquery 笔记 事件
Nov 02 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
php md5下16位和32位的实现代码
2008/04/09 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
PHP闭包实例解析
2014/09/08 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
PHP代码加密的方法总结
2020/03/13 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
百度地图api如何使用
2015/08/03 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
Python基于内置函数type创建新类型
2020/10/22 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
python实现经纬度采样的示例代码
2020/12/10 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
《灯光》教学反思
2014/02/08 职场文书
安全生产实施方案
2014/02/23 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
高考标语大全
2014/06/05 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书