が反応してぼんやりと反応してナビメニューが閉じない

Question

私はリアクションが新しく、navメニュー（.mega-menu-overlay）が組み込まれています。マウスオーバーで表示/非表示の代わりにクリック可能に変更していますマウスアウト。 onmouseoverを使用するときに以前はメニューを閉じるために機能していた関数をhandleMenuLeave（）と呼びます。私が間違っていることについての洞察はすばらしいでしょう。私のコードは以下の通りです：ブラーの

componentDidMount() { 
    document.addEventListener('scroll',() => { 
     if (this.state.megaMenuContent) { 
     if (window.scrollY >= 50) { 
      window.requestAnimationFrame(() => { 
      this.handleMenuLeave(); 
      }); 
     } 
     } 
     }); 
    if(document.querySelector('.mega-menu-overlay')){ 
     document.querySelector('.mega-menu-overlay').addEventListener('blur',() => { 
      this.handleMenuLeave(); 
      alert('clicked'); 
     }); 
    } 
    } 

Answer 1

反応に.mega-menu-overlayは、フォーム要素、ボタン、またはリンクされていない場合、blurイベントがトリガされません

私のナビゲーションメニューを閉じていません。

document.querySelector('div').addEventListener('blur', function(e){ 
 
\t console.log(e.target.tagName) 
 
}) 
 
document.querySelector('input').addEventListener('blur', function(e){ 
 
\t console.log(e.target.tagName) 
 
}) 
 

 
document.querySelector('a').addEventListener('blur', function(e){ 
 
\t console.log(e.target.tagName) 
 
}) 
 
document.querySelector('button').addEventListener('blur', function(e){ 
 
\t console.log(e.target.tagName) 
 
})

div{ 
 
    border:1px solid black; 
 
    padding:15px 0; 
 
} 
 
div:nth-child(odd){ 
 
    background:green; 
 
}

<div> 
 
hello world 
 
</div> 
 
<input type="text" /> 
 
<a href="#">Click me</a> 
 
<button> 
 
Click me 
 
</button>

あなたは、私はそれが他のすべての 要素のクリックを使用して閉じることができます方法を知っていますか？

div:nth-child(odd)などのCSSセレクタを使用して、他のすべての要素を取得してから、各要素にイベントリスナーをアタッチできます。

document.querySelectorAll('div:nth-child(odd)').forEach(function(div){ \t 
 
\t div.addEventListener('click',function(e){ 
 
\t \t this.style.display = "none" 
 
\t }) 
 
})

div{ 
 
    border:1px solid black; 
 
    padding:15px 0; 
 
} 
 
div:nth-child(odd){ 
 
    background:green; 
 
}

<div> 
 
First 
 
</div> 
 
<div> 
 
Second 
 
</div> 
 
<div> 
 
Third 
 
</div> 
 
<div> 
 
Fourth 
 
</div>