javascript onmouseout 解決辦法
更新時間：2010年07月17日 17:49:25 作者：
最近在做一個簡單的鼠標onmouseover時顯示層（層里面有多個鏈接文字），onmouseout 時隱藏層的功能時，發(fā)現(xiàn)有諸多問題.
onmouseout 發(fā)現(xiàn)它的觸發(fā)太敏感，當經(jīng)過層內(nèi)文字鏈時，即觸發(fā)onmousetout事件，功能不能正常顯示，經(jīng)過一番搜索，整理出來，供大家參考。
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;
}
};
//調(diào)用
LeaveFun('share_customerdiv').mouseleave(function(){document.getElementById('share_customerdiv').style.display ='none';})
3、最簡單，但在部分系統(tǒng)上會有輕微閃爍。
<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;
}
};
//調(diào)用
LeaveFun('share_customerdiv').mouseleave(function(){document.getElementById('share_customerdiv').style.display ='none';})
3、最簡單，但在部分系統(tǒng)上會有輕微閃爍。
復制代碼 代碼如下:
<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>
相關(guān)文章
MATLAB中ismissing函數(shù)用法小結(jié)
這篇文章主要介紹了MATLAB中ismissing函數(shù)用法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了詳解CocosCreator消息分發(fā)機制，詳細介紹了各模塊的設(shè)計，同學們一定要自己看下2021-04-04
layui文件上傳控件帶更改后數(shù)據(jù)傳值的方法
今天小編就為大家分享一篇layui文件上傳控件帶更改后數(shù)據(jù)傳值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
從柯里化分析JavaScript重要的高階函數(shù)實例
這篇文章主要為大家介紹了從柯里化分析JavaScript重要的高階函數(shù)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
微信小程序如何調(diào)用json數(shù)據(jù)接口并解析
這篇文章主要介紹了微信小程序如何調(diào)用json數(shù)據(jù)接口并解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-06-06
JS實現(xiàn)金額轉(zhuǎn)換(將輸入的阿拉伯數(shù)字)轉(zhuǎn)換成中文的實現(xiàn)代碼
這篇文章介紹了JS實現(xiàn)金額轉(zhuǎn)換(將輸入的阿拉伯數(shù)字)轉(zhuǎn)換成中文的實現(xiàn)代碼，有需要的朋友可以參考一下，希望對大家有用2013-09-09
KnockoutJS 3.X API 第四章之數(shù)據(jù)控制流if綁定和ifnot綁定
這篇文章主要介紹了KnockoutJS 3.X API 第四章之數(shù)據(jù)控制流if綁定和ifnot綁定的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了微信小程序路由跳轉(zhuǎn)兩種方式示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
基于Bootstrap下拉框插件bootstrap-select使用方法詳解
這篇文章主要為大家詳細介紹了基于Bootstrap下拉框插件bootstrap-select的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了js 對象使用的小技巧,結(jié)合實例形式分析了JavaScript對象的遍歷、查找、事件監(jiān)聽等相關(guān)操作技巧,需要的朋友可以參考下2019-11-11