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调用asp.net 页面后台的实现代码
Apr 27 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
js播放wav文件(源码)
Apr 22 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
vuex 的简单使用
Mar 22 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
vue使用watch监听属性变化
Apr 30 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+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
PHP读取Excel类文件
2017/05/15 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
jQuery事件详解
2017/02/23 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python实现计算最小编辑距离
2016/03/17 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
个人投资计划书
2014/05/01 职场文书
2014年新生军训方案
2014/05/01 职场文书
私人委托书格式
2014/09/10 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2014年食堂工作总结
2014/11/20 职场文书
学生个人总结范文
2015/02/15 职场文书