經過多次面試，我們常常會遇到面試官問出這樣的問題——

項目中有沒有遇到過什麼問題？

你是怎麼解決的？

橋豆麻袋！

不要驚慌 不要沉默

剛好上次做項目時

遇到了一個佈局的小問題

這裏就拿出來和大家分享一下

Question:

當鼠標移動到div內部的時候，會觸發onmouseout的事件。

有一個DIV元素，其內部有一個IMG元素和SPAN元素，不用理會這兩個內部元素怎麼佈局，這不是我要討論的重點。

爲了實現一些特殊的效果，我需要利用TD的onmouseover和onmouseout事件，測試時就會發現如下的狀況——

具體問題：當鼠標移入DIV內部時，onmouseover事件被觸發；接着再鼠標移動到DIV內部的IMG或者SPAN元素之上，我們肯定不會認爲這時鼠標已經移到了DIV的外邊，但奇怪的是onmouseout事件觸發了，而且緊接着onmouseover事件也馬上被觸發了。

這可不是我想要的，那麼該如何屏蔽內部元素給外層元素帶來的Javascript事件干擾呢？

在這裏給大家列舉兩種方法：

1.setTimeout

因爲在鼠標移動到內部元素之上而觸發了外層元素的onmouseout事件後，外層元素的onmouseover 也會馬上觸發，所以我們只需要把外層元素的onmouseout事件需要執行的動作延遲很短的一段時間來運行，然後在onmouseover事件中再執行clearTimeout方法，這樣就可以避免內部元素引起的事件干擾。

這是個很巧妙的的方法，因爲當onmouseout觸發後，實質性的方法並沒有馬上執行，而是要等待一小段時間。如果在這段時間裏馬上又觸發了onmouseover事件，那麼基本上就可以肯定onmouseout事件的觸發是因爲內部元素的干擾了，所以在onmouseover事件中使用clearTimeout來阻止延時的方法執行。

我的看法：將外層的onmouseout延遲（相當於給瀏覽器一段時間來判斷是否因爲移到了子元素上面導致的觸發），然後當瀏覽器反應過來的時候，要執行移入事件了，那麼此時就要把延遲器清除。

2.contains

下面來解釋一下上面兩行代碼的含義：

在IE中，所有的HTML元素都有一個contains方法，它的作用是判斷當前元素內部是否包含指定的元素。我們利用這個方法來判斷外層元素的事件是不是因爲內部元素而被觸發，如果內部元素導致了不需要的事件被觸發，那我們就忽略這個事件。

那麼上面兩行代碼的含義就分別是：

○ 當觸發onmouseover事件時，判斷鼠標離開的元素是否是當前元素的內部元素，如果是，忽略此事件；

○ 當觸發onmouseout事件時，判斷鼠標進入的元素是否是當前元素的內部元素，如果是，忽略此事件；

這樣，內部元素就不會干擾外層元素的onmouseover和onmouseout事件了。

但是！問題又來了——非IE的瀏覽器並不支持contains函數。不過既然我們已經知道了contains函數的作用，就可以自行添加如下的代碼來爲非IE瀏覽器增加contains支持：

上面的方法不兼容火狐：

方案三:

優秀的Jquery

完 美 解 決

來源：程序員食堂