ID =空白、ID =未定義の既存ではない要素によってトリガーされるOnMouseOverイベント

ユーザーがアイコン上を移動すると表示されるメニューがあります。私は、ユーザーがそのメニューまたはその親DIVから外に出たときに閉じることを望みます。これを行うために、onMouseOverを使用してIDが私が望むものでないときに隠すことを考えました。しかし、私がマウスを動かすと、カーソルは私がそこに置かなかった要素を出入りするように見えます。未定義のIDまたはID = ''（空白）です。誰でもそれを引き起こしていることを説明することはできますか？ID =空白、ID =未定義の既存ではない要素によってトリガーされるOnMouseOverイベント

これは、その要素

<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

を移動する場合でもしかし、それから私は私がいる限り、それはID =「toolbarSearchBoxとDIV内部要素だとして、のparentNodeのIDを使用すると考えていました'、私は幸せです。それらのゴースト要素はその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 = ''または=未定義のゴースト要素も入力されますが、私はそこでどのように終わるのかわかりません... – Dan

私はあなたの身体またはHTMLタグ多分？あなたが 'body'と' html'タグにidを追加すると、あなたはまだ空のIDを取得していますか？ – rebecca

ONMOUSEOVERとONMOUSEOUTイベントがあまりにも他の要素によって、時にはあまりにも要素の子によってトリガされ、結果です。 OnMouseLeaveには同じ問題はなく、マウスがその要素を外したときにのみトリガーされます

出典

2017-11-17 17:10:29 Dan

ID =空白、ID =未定義の既存ではない要素によってトリガーされるOnMouseOverイベント

答えて

関連する問題