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 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
JS清除选择内容的方法
Jan 29 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
PHP fclose函数用法总结
2019/02/15 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
jquery里的正则表达式说明
2011/08/03 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python反转列表的三种方式解析
2019/11/08 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
中专毕业生个人职业生涯规划
2014/02/19 职场文书
服务承诺口号
2014/05/22 职场文书
旅游节目策划方案
2014/05/26 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
python数字转对应中文的方法总结
2021/08/02 Python
Java8中接口的新特性使用指南
2021/11/01 Java/Android
Python Pygame实战之塔防游戏的实现
2022/03/17 Python