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控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
JavaScript交换两个变量方法实例
Nov 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表单提交与$_POST实例分析
2015/01/26 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
python中使用序列的方法
2015/08/03 Python
python函数形参用法实例分析
2015/08/04 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python3中exp()函数用法分析
2019/02/19 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
python requests.get带header
2020/05/05 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
python三引号如何输入
2020/07/06 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
文员自我评价怎么写
2013/09/19 职场文书
写给女朋友的道歉信
2014/01/12 职场文书
军训感想500字
2014/02/20 职场文书
社区食品安全实施方案
2014/03/28 职场文书
学校师德承诺书
2014/05/23 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫