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的实现简单的表格中增加或删除下一行
Aug 01 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
浅析php数据类型转换
2014/01/09 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
Python常用随机数与随机字符串方法实例
2015/04/09 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
留学自荐信的技巧
2013/10/17 职场文书
函授毕业生自我鉴定
2013/11/06 职场文书
前台领班岗位职责
2013/12/04 职场文书
高三政治教学反思
2014/02/06 职场文书
思想品德课教学反思
2014/02/10 职场文书
爱护草坪标语
2014/06/24 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
python实现简单的三子棋游戏
2022/04/28 Python