的Javascript：多的mouseout事件觸發

我知道在Javascript中（在WC3模型與微軟模式）的不同事件模型，以及鼓泡和捕捉之間的差異。然而，讀了幾個小時，對這個問題的各種文章後，我仍然不確定如何正確地編寫以下看似簡單的問題：如果我有一個外div和內部div元素的Javascript：多的mouseout事件觸發

，我想一個鼠標器out事件在鼠標離開外部div時被觸發。當鼠標從內部div跨越到外部div時，什麼都不應該發生，當鼠標從外部div跨越到內部div時，什麼都不應該發生。事件應該只有如果鼠標從外部div移動到周圍頁面，則會觸發。

<div id="outer" style = "width:20em; height:20em; border:1px solid #F00" align = "center" onmouseout="alert('mouseout event!')" > 
<div id="inner" style = "width:18em; height:18em; border:1px solid #000"></div> 
</div>

現在，如果我放在外格的「鼠標移開」事件，鼠標移出事件被觸發時，從內股利周圍頁面鼠標移動，因爲事件觸發一次當鼠標從內部移動到外部，然後再從外部移動到周圍的頁面時。

我知道可以取消使用ev.stopPropagation()的情況下，所以我嘗試註冊與內div來取消事件傳播的事件處理程序。但是，當鼠標從外部div移動到內部div時，這不會阻止事件發生。

所以，除非我忽視的東西，在我看來，這種行爲不能沒有複雜的鼠標跟蹤功能來實現。在將來，我打算使用更高級的框架重新實現很多代碼，比如JQuery，但是現在我想知道是否有一種簡單的方法來在普通的Javascript中實現上述行爲。

來源

2010-04-24 Channel72

該頁面是否可能將元素視爲組合？就像外部div本身只是「外部div」，然後內部div將是「outer-div + inner-div」，所以如果你在它們之間交叉，它將它們視爲兩個獨立的對象，兩者都是在他們兩人身上都附帶了一個世界末日事件？似乎有點奇怪，但似乎是這些網頁在這裏工作。 – animuson 2010-04-24 16:22:26

的mouseout事件在內的div「氣泡」與外層div。爲了檢測這已經從外層div發生，檢查event的target屬性：

<div id="outer"> 
    <div id="inner">x</div> 
</div>

document.getElementById('outer').onmouseout= function(event) { 
    // deal with IE nonsense 
    if (event===undefined) event= window.event; 
    var target= 'target' in event? event.target : event.srcElement; 

    if (target!==this) return; 
    ... 
};

與mouseout通常的問題是你得到它當父的指針移動「走出去」即使它只是向內「移動」到孩子身上。您可以通過查找鼠標移動到該元素的祖先列表中手動檢測這種情況：

var other= 'relatedTarget' in event? event.relatedTarget : event.toElement; 
    while ((other= other.parentNode).nodeType===1) 
     if (other===this) return;

這是mousein/mouseout模型：它是隻關心哪些元素是鼠標的直接父。你更多的時候需要的是mouseenter/mouseleave模型，該模型考慮元素樹作爲一個整體，所以你只能得到mouseleave當指針離開元素或 - 它的後裔，而不是直接移動到元素 - 或 - 其後裔。

mouseenter不幸/ mouseleave目前是IE-僅事件對。希望其他瀏覽器能夠提取它，因爲它有望成爲DOM Level 3 Events的一部分。

來源

2010-04-24 16:26:51 bobince

的Javascript：多的mouseout事件觸發

回答

相關問題