javascript onmouseout 解决办法
更新时间：2010年07月17日 17:49:25 作者：
最近在做一个简单的鼠标onmouseover时显示层（层里面有多个链接文字），onmouseout 时隐藏层的功能时，发现有诸多问题.
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>
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>
相关文章
这篇文章主要为大家详细介绍了小程序实现页面顶部选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
最近在学微信小程序开发的时候,碰上了一个问题,所以想着总结下,这篇文章主要给大家介绍了关于微信小程序如何实现商品列表跳转商品详情页功能的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了JS返回iframe中frameBorder属性值的方法,分析了frameBorder属性的功能及javascript获取frameBorder属性值的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JavaScript实现图片放大预览效果，帮助大家更好的理解和制作JavaScript特效，感兴趣的朋友可以了解下2020-11-11
在JavaScript中捕获错误通常有四种方式,try-catch 语句块,Promise 的 catch 方法,throw 语句以及window.onerror事件处理程序,并通过代码示例给大家讲解的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了JS实现系统登录页的登录和验证，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
我们在微信小程序开发的时候,手机号的验证是经常需要操作的,那么如何验证手机号呢?这篇文章主要给大家介绍了关于微信小程序判断手机号是否合法的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要为大家详细介绍了JavaScript实现淘宝商品图切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
流程编辑器是一种用于创建、编辑和管理流程图的工具,它提供了一个可视化的界面,使用户能够以图形化的方式定义和配置流程的各个步骤、条件和流程间的关系,说明关于bpmn.js的一些事件, 通过本文你可以了解到,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了JS实现的表格行上下移动操作,涉及javascript针对页面元素节点与属性的相关操作技巧,需要的朋友可以参考下2016-08-08
最新评论