js はイベントを使用してバブリングを防止し、クリック空白モーダルを非表示にします。 box_javascript スキル

フロントエンドで作業していると、クリックすると特定のボックスが表示されるというような小さな機能が必要になることがよくありますが、操作したくない場合は、空白部分をクリックして非表示にしたいことがあります。箱。次のシナリオを想定します。小さなボタンをクリックするとモーダル ボックスがポップアップします。

とてもシンプルですが、空白部分をクリックしたときにモーダルボックスを非表示にしたいので、ボタン ID: btn、モーダルボックス ID: model を追加します。

おそらく最も単純なアイデアは、直接リッスンすることです。ドキュメント上のイベントの疑似コードは次のとおりです:

ボタン クリック ポップアップ イベント監視:

コードをコピー コードは次のとおりです:

$("#btn").bind("click",function(e){
if(e.stopPropagation){//必要バブリングを防ぐ
e .stopPropagation();
}else{
e.cancelBubble = true;

コードをコピーします

コードは次のとおりです: $(document).bind("click",function(e){ if (クリック イベントがモデル上にない) {

Hide modal box;

}
})


一見すると問題ありませんが、実際には、多くの問題があります。まず、バブルをブロックすることに注意する必要があります。そうしないと、ボタンをクリックしてもモーダルがポップアップし、すぐに非表示になります。モーダル ボックスには小さなコントロールがたくさんありますが、モーダル ボックス内のクリックを判断するのが難しい場合があります。

ここでは、最も単純ですが非常に賢い方法の 1 つを紹介します。

まず、次のようにモーダル ボックスのイベントをリッスンします。 🎜>


コードをコピーします

コードは次のとおりです: $("#modal").bind("click" 、 function(event) { if (event &&event.stopPropagation) { event.stopPropagation(); } else {

event.cancelBubble = true; 🎜>});

モーダルでクリック イベントが発生しないようにします。

次に、




コードをコピーします。

コードは次のとおりです。

$(document).one("click", function(e){ var $target = $(e .currentTarget); if ( $target.attr("id") != "modal") { $("#modal").css("display", "none"); } });

完了、とても簡単です