jQuery は、ポップアップ レイヤーの外側の任意の場所をクリックすることで、ポップアップ レイヤーを閉じる効果を実現します。

以前プロジェクトに取り組んでいたとき、メイン ページのボタンをクリックすると、右側に div がポップアップして、対応するコンテンツに関する詳細情報が出力されることがよくありました。現時点では、マウスがポップアップ レイヤーの外側をクリックしたときにポップアップ レイヤーを閉じることができればと考えています。主なアイデアは次のとおりです。

マウスによってクリックされた要素を検索する

この要素が指定された範囲内にあるかどうかを判断する。実際には、それは親要素を決定するためのものです

そうでない場合、ポップアップ レイヤーを非表示にします

特定の実装は実行されません

このコードは jQuery を使用する必要があります。 コードは次のとおりです。

$(document).mousedown(function(e){
if($(e.target).parent("#info").length==0){
$("#info").hide();
}
})
$(document).mousedown(function(e){})

$(document) これは、ネイティブの window.ducment と同様に、Web ページのドキュメント オブジェクト全体を取得するためのものです。

mousedown はマウス イベントです。これは、マウス ポインターが要素上に移動し、マウス ボタンが押されたときを指します。 同様のイベントには次のものが含まれます:

mouseup: 要素上にあるとき マウス ボタンが放されたとき

mouseover: マウス ポインターが要素上にあるとき

$(e.target)

$(e.target) は、クリック イベントを取得する要素を表します。

parent()

$(e.target).parent("#info").length は、info の ID を持つ現在のクリックイベント要素の親要素を取得します。