JavaScriptの外でクリックしてdivまたはメニューを閉じる

Javascriptでプログラムを作成している場合、クリックでメニューを開き、ユーザーがメニューの外側をクリックするとメニューを閉じるという状況に出くわす可能性があります。 それを行うための非常に簡単な方法を開発しました。 ドキュメントの本文にイベントリスナーを追加します。 誰かがそれをクリックすると、イベントのターゲットIDを探します。 ボックスのdivのIDと一致する場合、何もしません。 表示されない場合は、メニューを閉じます。

それをもう少し進めて、クリックイベントリスナーが使用されていないときに全身にクリックイベントリスナーを残すことは非効率的です。 この場合、メニューがまだ開かれていない場合、メニューの外側をクリックするのを聞く理由はありません。 表示されているdivのコールバックにイベントリスナーを追加します。 同じように、divが再び非表示になったら、イベントリスナーを削除します。

ブラックボックス内のDivクリックを表示しますが、何も起こりません。 外でクリックすると消えます$（ '#showbox'）。click（function（）{$（ '#bigbox'）。show（function（）{document.body.addEventListener（ 'click'、boxCloser、false）;}） ;}）; function boxCloser（e）{if（e.target.id！= 'bigbox'）{document.body.removeEventListener（ 'click'、boxCloser、false）; $（ '#bigbox'）。hide（）; }}

また、上記の機能の一部はそのライブラリを使用するため、プロジェクトにjQueryを含めるようにしてください。