OnMouseOver事件由ID =空白且ID =未定義的非現有元素觸發

我有一個菜單，當用戶將鼠標懸停在圖標上時顯示。當用戶將鼠標移出該菜單或其父級DIV時，我希望它關閉。爲了做到這一點，我想使用onMouseOver並在ID不是我想要的那個時隱藏它。但是，當我移動鼠標時，光標似乎進入和退出我自己並沒有放在那裏的元素，其中未定義ID或ID =''（空白）。任何人都可以解釋導致它的原因，並且可能的話，如何阻止它的發生？OnMouseOver事件由ID =空白且ID =未定義的非現有元素觸發

這是菜單，其元素

<div class = "desktopToolbarSearchBoxWithoutOptions" id = "toolbarSearchBox"> 
    <img src = "${webAppRoot}images/sandwich.png" class = "menuSearchSelector pointer" onMouseOver = "showSearchOptions()" id = "menuSearchSelector"/> 

    <span class="toolbarMenuItem pointer" id = "option1"> 
     Subject 
    </span> 

    <span class="toolbarMenuItem pointer" id = "option2"> 
     Name 
    </span> 

    <span class="toolbarMenuItem pointer" id = "option3"> 
     Location 
    </span> 
</div>

這是我做的所有元素的onmouseover事件作出迴應。我不得不承認，我更像是一個服務器人，並且無法理解循環表達式的意義，我從另一個論壇複製它，它說它做我需要的東西。也許這就是問題所在？

function startClickListener() 
{ 
    document.addEventListener 
    (
     "mouseover", function (e) 
     { 
      for (var element = e.target; element; element = element.parentNode) 
      { 
       console.log ("> > > Element ID : " + element.id); 
      } 
     } 
    ); 
}

我想菜單消失，每次ID不是我想要的。然而，即使選項1，選項2和選項3跨度之間移動時，我得到這些鬼元素

8BM_js.jsp:688 > > > Element ID : toolbarSearchBox 
8BM_js.jsp:688 > > > Element ID : 
8BM_js.jsp:688 > > > Element ID : desktopToolbar 
(2 x) 8BM_js.jsp:688 > > > Element ID : 
8BM_js.jsp:688 > > > Element ID : undefined 
8BM_js.jsp:688 > > > Element ID : menuSearchSelector 
8BM_js.jsp:688 > > > Element ID : toolbarSearchBox 
8BM_js.jsp:688 > > > Element ID : 
8BM_js.jsp:688 > > > Element ID : desktopToolbar 
(2 x) 8BM_js.jsp:688 > > > Element ID : 
8BM_js.jsp:688 > > > Element ID : undefined 
8BM_js.jsp:688 > > > Element ID : toolbarSearchBox 
8BM_js.jsp:688 > > > Element ID : 
8BM_js.jsp:688 > > > Element ID : desktopToolbar 
(2 x) 8BM_js.jsp:688 > > > Element ID : 
8BM_js.jsp:688 > > > Element ID : undefined 
8BM_js.jsp:688 > > > Element ID : option1 
8BM_js.jsp:688 > > > Element ID : toolbarSearchBox 
8BM_js.jsp:688 > > > Element ID : 
8BM_js.jsp:688 > > > Element ID : desktopToolbar 
(2 x) 8BM_js.jsp:688 > > > Element ID : 
8BM_js.jsp:688 > > > Element ID : undefined 
8BM_js.jsp:688 > > > Element ID : option2 
8BM_js.jsp:688 > > > Element ID : toolbarSearchBox 
8BM_js.jsp:688 > > > Element ID : 
8BM_js.jsp:688 > > > Element ID : desktopToolbar 
(2 x) 8BM_js.jsp:688 > > > Element ID : 
8BM_js.jsp:688 > > > Element ID : undefined 
8BM_js.jsp:688 > > > Element ID : option3

後來我想我可以使用parentNode的ID，只要它與ID =「toolbarSearchBox的DIV中的元素'，我很開心。看起來那些幽靈元素甚至不屬於那個DIV。也許我得到的錯誤信息是線索？

function startClickListener() 
{ 
    document.addEventListener 
    (
     "mouseover", function (e) 
     { 
      for (var element = e.target; element; element = element.parentNode) 
      { 
       console.log ("> > > Element ID : " + element.id); 
       console.log ("> > > Parent ID : " + element.parentNode.id); 
      } 
     } 
    ); 
}

這就是結局

8BM_js.jsp:686 > > > Element ID : toolbarSearchBox 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : desktopToolbar 
8BM_js.jsp:686 > > > Element ID : desktopToolbar 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : undefined 
8BM_js.jsp:686 > > > Element ID : undefined 
8BM_js.jsp:687 Uncaught TypeError: Cannot read property 'id' of null at HTMLDocument.<anonymous> (8BM_js.jsp:687) (anonymous) @ 8BM_js.jsp:687 
8BM_js.jsp:686 > > > Element ID : menuSearchSelector 
8BM_js.jsp:687 > > > Parent ID : toolbarSearchBox 
8BM_js.jsp:686 > > > Element ID : toolbarSearchBox 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : desktopToolbar 
8BM_js.jsp:686 > > > Element ID : desktopToolbar 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : undefined 
8BM_js.jsp:686 > > > Element ID : undefined 
8BM_js.jsp:687 Uncaught TypeError: Cannot read property 'id' of null at HTMLDocument.<anonymous> (8BM_js.jsp:687) (anonymous) @ 8BM_js.jsp:687 
8BM_js.jsp:686 > > > Element ID : toolbarSearchBox 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : desktopToolbar 
8BM_js.jsp:686 > > > Element ID : desktopToolbar 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : undefined 
8BM_js.jsp:686 > > > Element ID : undefined 
8BM_js.jsp:687 Uncaught TypeError: Cannot read property 'id' of null at HTMLDocument.<anonymous> (8BM_js.jsp:687) (anonymous) @ 8BM_js.jsp:687 
8BM_js.jsp:686 > > > Element ID : option1 
8BM_js.jsp:687 > > > Parent ID : toolbarSearchBox 
8BM_js.jsp:686 > > > Element ID : toolbarSearchBox 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : desktopToolbar 
8BM_js.jsp:686 > > > Element ID : desktopToolbar 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : undefined 
8BM_js.jsp:686 > > > Element ID : undefined 
8BM_js.jsp:687 Uncaught TypeError: Cannot read property 'id' of null at HTMLDocument.<anonymous> (8BM_js.jsp:687) (anonymous) @ 8BM_js.jsp:687 
8BM_js.jsp:686 > > > Element ID : option2 
8BM_js.jsp:687 > > > Parent ID : toolbarSearchBox 
8BM_js.jsp:686 > > > Element ID : toolbarSearchBox 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : desktopToolbar 
8BM_js.jsp:686 > > > Element ID : desktopToolbar 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : undefined 
8BM_js.jsp:686 > > > Element ID : undefined 
8BM_js.jsp:687 Uncaught TypeError: Cannot read property 'id' of null at HTMLDocument.<anonymous> (8BM_js.jsp:687) (anonymous) @ 8BM_js.jsp:687 
8BM_js.jsp:686 > > > Element ID : option3 
8BM_js.jsp:687 > > > Parent ID : toolbarSearchBox 
8BM_js.jsp:686 > > > Element ID : toolbarSearchBox 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : desktopToolbar 
8BM_js.jsp:686 > > > Element ID : desktopToolbar 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : 
8BM_js.jsp:686 > > > Element ID : 
8BM_js.jsp:687 > > > Parent ID : undefined 
8BM_js.jsp:686 > > > Element ID : undefined

來源

2017-09-14 Dan

您可以將eventlistener添加到顯示選項的圖標，否？或者這是一個關於空ID元素的一般性問題？ – rebecca

@rebecca該圖標正確打開帶有選項的菜單。我想攔截鼠標或鼠標移出每個元素，以便當鼠標離開帶有選項的DIV時，它們消失。例如：如果元素鼠標的ID結束不是「option1」，「option2」或「option3」，則關閉選項div。但是當從一個選項到另一個時，它也會進入那些ID =''或= undefined的鬼元素，我不知道如何在那裏結束...... – Dan

我假設這些是你的身體或html標記也許？如果你添加一個id到你的'body'和'html'標籤，你是否仍然獲得空ID？ – rebecca

的onmouseover和onmouseout事件由元素的孩子太受其他因素也觸發，有時 - 可能不是很明白的時間和原因。 OnMouseLeave沒有相同的問題，只有當鼠標離開它所連接的元素時纔會觸發。

來源

2017-11-17 17:10:29 Dan

OnMouseOver事件由ID =空白且ID =未定義的非現有元素觸發

回答

相關問題