關於onmouseover和onmouseout的bug

總結了一下關於使用onmouseover以及onmouseout會出現的bug

首先簡單的布局：

<div id="box">
    <div>這是一個內容</div>
</div>

簡單寫了一下樣式，效果如下：

js代碼如下：

var oBox = document.getElementById("box"); oBox.onmouseover = function(){ alert(“移入"); } oBox.onmouseout = function(){ alert("移出"); }

需要的效果是移入時alert(“移入")，移出時alert("移出");

然而會產生一個bug，當鼠標從灰色移動到粉色區域，或者從粉色移動到灰色區域的時候，仍然會觸發onmouseover和onmouseout 事件.

解決思路：判斷來源，如果從盒子里面移動則不觸發。

首先，要借助事件對象，對事件對象進行兼容處理：

var oEvent = ev || event;

事件對象中有一個屬性fromElemen，獲得來源，但是也存在兼容問題，只適用於高級瀏覽器，在chrome和ie里有relatedTarget屬性

var oFrom = oEvent.fromElement || oEvent.relatedTarget

判斷是是否在內部移動，是則直接return返回

//判斷是否包含
if(oFrom && oBox.contains(oFrom)){ return; }

最后js代碼如下：

oBox.onmouseover = function(ev){ var oEvent = ev || event;//兼容處理
    var oFrom = oEvent.fromElement || oEvent.relatedTarget;//兼容處理
    //如果在里面則返回
    if(oFrom && oBox.contains(oFrom)){ return; } alert("移入"); };

同理，onmoouseout的解決方法代碼如下：

oBox.onmouseout = function(ev){ var oEvent = ev || event; //處理兼容
    var oTo = oEvent.toElement || oEvent.relatedTarget; //處理兼容
    //如果在里面則返回
    if(oTo && oBox.contains(oTo)){ return; } alert("移出"); };

關於兼容問題，ev屬於高級瀏覽器，event屬於ie

         relatedTarget屬於高級瀏覽器，fromElement和toElement屬於chrome和ie

最后介紹一種簡便方法，onmouseenter事件和onmouseleave事件以及可以解決以上問題，使用方法相同。