當元素消失時onmouseout不會被觸發

我有一個觸發工具提示的mouseover事件;當鼠標移除時，我希望此工具提示消失。 onmouseout效果不錯，，除了元素消失。當元素消失時onmouseout不會被觸發

這裏是一個蒸餾例子使用的背景改變，而不是工具提示（這樣你就可以輕鬆地運行它）：

<div id="bar"> 
    <div onmouseover="document.bgColor='gray'" onmouseout="document.bgColor='white'" style="border:1px solid black;"> 
    <span onclick="document.getElementById('bar').innerHTML = ''">Remove me</span> 
    </div> 
</div>

問題是這樣的：當我點擊「刪除我」，我的鼠標不再「超過」div，但是上傳不會觸發，因爲它已經消失。當我點擊「刪除我」時，我希望此示例恢復爲白色背景。

有一個明顯的解決方案，我想避免。我不想要刪除元素的onclick處理程序來手動「修復」文檔。這是因爲可能會有任意多個處理程序可能會刪除div。通常，所有的鼠標移出和移除處理程序都可以動態生成，並且需要彼此瞭解。讓事情更加複雜的是，我可能會遇到可移動元素相互嵌套的情況，並且可以移除其中的任何元素。（我也許能夠去除這個限制，但它會採取一些工作。）

下面是一個可以工作的解決方案的例子：在鼠標懸停，註冊爲「主動」的多種形式對話;那麼每當刪除元素時，遍歷所有模態對話框並查找不再位於文檔中的對話框。但是這需要我保持一個全球性的對話存儲，並且需要花費時間O（n * m），其中n是活動對話的數量，m是對話在DOM中的嵌套程度。此外，我需要在刪除元素時運行此操作，即使它很明顯沒有任何影響。

下面是另一個可以工作的解決方案：如果您可以實現onremovedfromdocument事件，那麼我們只需將onmouseout處理程序複製爲onremovedfromdocument事件，並且該示例也可以正常工作。（我聽說jQuery可能支持這一點，但我需要與非jQuery代碼進行交互操作。）

這裏還有另一種可能的解決方案：讓每個模態對話反覆輪詢以查看其父是否在文檔中。當它不是，它會犯下seppuku。但是投票真的很難看。（如果沒有更好的東西，我想我願意這樣做）

下面是另一個想法：使用事件捕獲允許onmouseout元素首先捕獲click元素，並設置一個計時器來檢查它是否仍然存在在點擊完成後的文檔中。

僅供參考，這裏是我真正想要做的事：我有一個JS窗口小部件，其構建了一個複雜的樹狀結構。對小部件的許多編輯都涉及到單擊樹中的某個按鈕，然後從樹中添加或刪除（可能會刪除它自己）。但是，某些節點需要更復雜的編輯過程，因此我想調出一個工具提示當用戶將鼠標懸停在他們身上時，可以使用指令和更多的按鈕，或者如果用戶點擊它們，甚至可以保持對話。但是用戶可能會改變主意並決定刪除該節點或節點的任何父節點，在這種情況下，對話應該消失。您可以查看我目前擁有here的實現，其中對話框正在手動創建。我想開始使用一個漂亮的工具提示庫，但他們都有我上面描述的錯誤。

來源

2012-05-22 Edward Z. Yang

是否有一個原因，你有一個結束''標籤時，你有沒有相應的開放呢？你的跨度也是無效的HTML。你需要一個結束跨度。 – Daedalus

對不起，這是一個錯字。 –

您的範圍仍然無效。不存在。 – Daedalus

嘗試：

<script> 
    var liveToolTip = new Array(); 
    function addLiveToolTip(elName){ 
     if(elName in liveToolTip){ 
     }else{ 
      liveToolTip[elName]=1;} 
    } 
    function removeLiveToolTip(elName){ 
     if(elName in liveToolTip){ 
      delete liveToolTip[elName]; 
     } 
    } 
    function runOnMouseOuts() { 
     for(mouseOut in liveToolTip) { 
      document.getElementById(mouseOut).onmouseout(); 
     } 
    } 
</script> 
<div id="bar"> 
    <div onmouseover="addLiveToolTip(this.id);document.bgColor='gray'" 
     onmouseout="removeLiveToolTip(this.id);document.bgColor='white'" style="border:1px solid black;" id="foo"> 
     <span onclick="document.getElementById('bar').innerHTML = '';runOnMouseOuts()"> 
     Remove me</span> 
    </div>

來源

2012-05-22 22:41:19

該解決方案無法通過模塊化測試。如果酒吧內有多個onmouseout處理程序會怎麼樣？ –

我認爲被稱爲onmouseoutevent是希望。您也可以直接更改背景顏色。我編輯它做。 –

您編輯於事無補，考慮到** **文件被改變的背景;而不是'div' **欄的內容**。 – Daedalus

在現代的瀏覽器，有DOMNodeRemoved事件。所以：

var div = document.getElementsByTagName('div')[0]; 
div.addEventListener('DOMNodeRemoved', function(e){ 
    document.bgColor='white'; 
});

http://jsfiddle.net/HX88L/

壞的是，該事件已經deprecated。對於所謂的mutation events更換看起來並不像它已經準備好使用還。 MDN文檔頁面仍然只是一個stub。

來源

2012-05-22 22:54:24 bfavaretto

不錯！你知道瀏覽器的現代化程度嗎？編輯：重新，棄用，這太糟糕了！ –

我讀過它可以在IE9，Chrome和Firefox上使用 - 請參閱http://stackoverflow.com/a/6987471/825789 – bfavaretto

奇怪的是，無論出於何種原因，在完整的示例中這是行不通的。我不知道爲什麼。 –

當元素消失時onmouseout不會被觸發

回答

相關問題