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异步编程模型Promise模式详细介绍
May 08 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
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代码
2008/04/07 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python sys.argv[]用法实例详解
2018/05/25 Python
python中cPickle类使用方法详解
2018/08/27 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python面试题之列表声明实例分析
2019/07/08 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
《夏夜多美》教学反思
2014/02/17 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
关于学习的演讲稿
2014/05/10 职场文书
投标承诺书怎么写
2014/05/24 职场文书
平面设计专业求职信
2014/08/09 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
2014年行政工作总结
2014/11/19 职场文书
捐款感谢信
2015/01/20 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书