onMouseOut事件發生在錯誤的元素中？

在我們所有的頁面上，頂部顯示一條重要信息。當頁面加載時，該消息看起來像淺灰色背景中的純紅色文本（與頁面的其餘部分相同）。如果用戶想更新它，他們可以點擊它並調用editMsg函數，這使得它看起來像一個普通的文本輸入，並且一個「保存」按鈕將出現在右邊。onMouseOut事件發生在錯誤的元素中？

我的任務是取消更新，如果用戶將鼠標移動到封閉div的外面，將所有內容都返回到原始外觀。我嘗試過Blur，但似乎無法讓它做任何事情！

它似乎很簡單，但如果我將鼠標移動到文本輸入外但仍在div中，它將調用cancelMsgChg函數。我嘗試了幾次不同版本的cancelBubble（IE）和stopPropagation（FF），但都沒有運氣。事實上，我不明白爲什麼我需要這些，如果他們在不同的元素。

我花了整整一個早上在這裏追逐我的尾巴，在這裏閱讀一些帖子，但在一小時內丟失更多！

的HTML是：

<div id="update_message" onMouseOut="cancelMsgChg('onMouseOut');" > 
<br /> 

    <input id="message" onclick="editMsg();" 
    type="text" value="My message" 
    style="background:#DDDDDD; color:#DD0000; font-weight:bold; border:0;" /> 

    <button id="save_message" style="display:none;" 
    class="btn" onclick="return saveHeaderMsg('Save Header Message', 
    document.getElementById('message').value);">Save Message</button> 

<br /><br /> 
</div>

UPDATE：

我刪除從div標籤的onmouseout事件和添加時被點擊在div外鼠標的事件監聽器：

if (document.addEventListener) { 
    document.addEventListener("click", cancelMsgChg('click'), false); 
} else if (document.attachEvent) { 
    // IE 
    document.attachEvent("onclick", cancelMsgChg('onclick'), false); 
} 

function cancelMsgChg(e) { 

    console.log ("in cancelMsgChg"); 

    // In Internet Explorer you should use the global variable `event` 
    e = e || event; 

    // In Internet Explorer you need `srcElement` 
    var target = e.target || e.srcElement; 

    var id = target.id; 

    console.log ("id = " + id); 

    if (id != "update_message") { 
    //reset everything 
    } 
}

但我得到一個「目標是未定義的」錯誤。所以......'e'根本沒有定義？

來源

2013-01-11 ThorInSuburbia

_I'm負責取消更新，如果用戶將鼠標移動到封閉div的外面，將所有內容都返回到原來的外觀._這聽起來像是一個可用性的噩夢。爲什麼不選擇保存按鈕旁邊的取消按鈕？ –

爲什麼不試試JQuery？我會刺傷它的。 –

我已經請求jQuery，但尚未獲得批准。我有一個取消按鈕全部編碼，它很好，但顯然不是他們想要的。我必須使用IE8。 – ThorInSuburbia

你的問題是雙重的。一種是在內部元素上進行鼠標移動會在父級上觸發鼠標移動，第二種方式是讓內部元素觸發該元素上的鼠標移出到父級。

爲了解決這個問題，您需要檢查事件的目標並查看鼠標的移動位置，如果mouseout來自父元素並且位於父元素之外，則只運行代碼。這裏有一個簡單的fiddle to demonstrate：

<div class="outer" onmouseout="mouseout(event)"> 
    <div class="inner"></div> 
</div> 

function mouseout(event) { 
    console.log(event.target); 
    console.log(event.relatedTarget); 
    console.log("mouseout!"); 
}

在小提琴，我有內聯定義的onmouseout處理器的外層div。如果你看控制檯，你會看到，如果你將鼠標移到外部div然後退出，那麼mouseout事件將會觸發。但是，如果將鼠標移動到外部div，然後移動到內部div，則還會出現鼠標懸停事件。最後，如果你移出內部div（但仍然在外部div），你會得到另一個鼠標事件！

來源

2013-01-11 21:07:22

我知道這應該很簡單！謝謝馬特！ – ThorInSuburbia

因爲您沒有使用任何表單元素（input，select，textarea），所以對模糊不起作用。

即使鼠標移動到div內的其中一個元素中，mouseOut事件也會被觸發。當mouseOut事件被觸發時，你可以檢查鼠標的前進方向，看看它是否進入了其中一個封閉的div。有關更多信息，請參閱http://www.quirksmode.org/js/events_mouse.html。

來源

2013-01-11 20:42:33 dfmiller

onMouseOut事件發生在錯誤的元素中？

回答

相關問題