由ID =空且ID =未定义的非现有元素触发的OnMouseOver事件

时间：2017-09-14 13:42:16

标签： javascript

当用户将鼠标悬停在图标上时，我会显示一个菜单。当用户将鼠标悬停在该菜单或其父DIV之外时，我希望它关闭。为了做到这一点，我想到使用onMouseOver并在ID不是我想要的那个时隐藏它。但是，当我移动鼠标时，光标似乎进入并退出我自己没有放置的元素，未定义的ID或ID =＆＃39;＆＃39; （空白）。任何人都可以解释导致它的原因，并且可能解释如何阻止这种情况发生吗？

这是菜单及其元素

<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不是我想要的ID时，我希望菜单消失。但是，即使在option1，option2和option3 span之间移动，我也会得到那些鬼元素

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，只要它是DIV中ID =＆＃39; toolbarSearchBox＆＃39;的内容，我很高兴。看来这些幽灵元素甚至不属于那个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

1 个答案:

答案 0 :(得分：0)

OnMouseOver和OnMouseOut事件也由元素的子元素触发，有时也由其他元素触发 - 无法理解何时以及为何。 OnMouseLeave没有相同的问题，仅在鼠标离开附加到

的元素时触发
相关问题
最新问题