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 相关文章推荐
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
基于vue实现探探滑动组件功能
May 29 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
JS中的phototype详解
2017/02/04 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
Python算法之图的遍历
2017/11/16 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
python字典的遍历3种方法详解
2019/08/10 Python
浅析matlab中imadjust函数
2020/02/27 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
举例说明类变量和实例变量的区别
2016/06/30 面试题
幼师自荐信
2013/10/26 职场文书
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
开业庆典答谢词
2014/01/18 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
机电一体化求职信
2014/03/10 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
微观世界观后感
2015/06/10 职场文书
导游词之日本富士山
2020/01/06 职场文书