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 document.referrer 用法
Apr 30 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
react如何快速设置文件路径别名
Apr 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
PHP学习之PHP变量
2006/10/09 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
遗传算法之Python实现代码
2017/10/10 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
python反扒机制的5种解决方法
2021/02/06 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
大学生物业管理求职信
2013/10/24 职场文书
上课迟到检讨书
2014/01/19 职场文书
2014年科协工作总结
2014/12/09 职场文书