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 相关文章推荐
jQuery on方法传递参数示例
Dec 09 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
js全选按钮的实现方法
Nov 17 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 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广告加载类用法实例
2014/09/23 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
js实现简单的碰壁反弹效果
2016/08/30 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
移动端效果之IndexList详解
2017/10/20 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
小程序接口的promise化的实现方法
2019/12/11 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python命名空间详解
2014/08/18 Python
详解Python中的join()函数的用法
2015/04/07 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
python异常触发及自定义异常类解析
2019/08/06 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers