javascript onmouseout問題解決方案

方案一:

希望實現 當滑鼠離開一個DIV的時候觸發一個事件處理函數 於是用onmouseout 結果卻發現它的觸發是不是也太敏感了 原因現在也沒有弄清楚 IE下好像是因為區分mouseout時的fromElement還是toElement ，IE 5.5以上的onmouseleave事件就比較好用 偏FF又不支援這個事件 只有自己想辦法手工判斷了。

<SCRIPT> /*** * 參數e 是對象傳遞的觸發事件 FF下想訪問event對象必須傳遞event參數 * 參數o 是目標DIV對象 */   function fun(e,o) {         /* FF 下判斷滑鼠是否離開DIV */         if(window.navigator.userAgent.indexOf("Firefox")>=1) {             var x = e.clientX + document.body.scrollLeft;             var y = e.clientY + document.body.scrollTop ;             var left = o.offsetLeft;             var top = o.offsetTop;             var w = o.offsetWidth;             var h = o.offsetHeight;                         if(y < top || y > (h + top) || x > left + w || x<left ) {                 alert("mouseout");             }         }         /* IE */         if(o.contains(event.toElement ) == false    ) alert("mouseout");             } </SCRIPT> <DIV onmouseout=fun(event,this)>content</DIV>

需要注意 在取滑鼠的值的時候 一定要加上捲軸已經拖動過的內容e.clientY + document.body.scrollTop 如果只是e.clientY得到是個錯誤的值 當然如果高寬都很小 是看不出來問題。 取一個對象的高和寬 也可以使用 clientHeight clientWidth 屬性 以後遇到FF IE不相容的時候要多看看FF的開發手冊 http://developer.mozilla.org/en/docs/DOM:element.offsetLeft

 

 

方案二:(與一相似)

js的onmouseout有很奇怪的一個問題。例如

<div onmouseout="alert(123)">

<a href="#">test</a>

</div>

我們預期只有當滑鼠從div中移開的時候才會觸發onmouseout事件，可是，事實上，當我們移到div中的元素時，例如本例中的a標籤時，就會觸發onmousout事件。也就是說，移到對象的子物件上，也算onmouseout了。這往往會讓我們預期的效果達不到。今天的工作就遇到了這個問題。在blueidea上搜了一下，找瞭解決辦法。相容IE和FF。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿當製作</title>
</head>

<body>
<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>
</body>
</html>

 

 

今天發現JQ中關於這個問題,已經有了一個好的解決辦法了.呵呵,jquery中定義了一種事件叫做"mouseleave",用這個事件做事件控制代碼的話,就可以解決這個問題了.越來越發現jquery是個好東西了.

方案三:

，jQuery　V1.2.2推薦用bind("mouseleave",function(){})來代替以前的mouseover方法
用bind("mouseenter",function(){})來代替mouseout，同樣也針對以前的hover方法，要看詳細的說明點這個地址：http://docs.jquery.com/Release:jQuery_1.2.2

$(document).ready(function() {
   $("#a1").bind("mouseleave", function(){
   $('<div style="color:red;">out</div>')
   .insertAfter($(this));
});
});