jQueryポップアップウィンドウでの動的外部リンクジャンプのイベント処理を最適化する

この記事の目的は、jQueryポップアップウィンドウで外部リンクリダイレクトボタンをリダイレクトする問題を解決することを解決することを目的としています。ユーザーが複数の外部リンクを連続してクリックすると、ポップアップのジャンプボタンは常に最初のクリックリンクを指す場合があります。コアソリューションは、オフ（「クリック」）メソッドを使用して、新しいイベントの各バインディングの前に古いイベントハンドラーを元に戻し、ジャンプ動作が常に最新のターゲットURLを指し、正確で制御可能なリンクリダイレクトを実現することです。

問題の説明と分析

Webアプリケーションを開発するときは、ユーザーが外部リンクをクリックすると、プロンプトまたは確認を処理する必要があります。一般的なシナリオは、ユーザーがオフサイトリソースへのリンクをクリックすると、モーダルウィンドウ（モーダル）がポップアップします。これには「GO」または「ジャンプ」ボタンが含まれて、最終的にユーザーのナビゲーション意図を確認します。

ただし、jQueryを使用してそのような機能を実装する場合、適切に処理されない場合は、トリッキーな問題に遭遇する可能性があります。ユーザーがページ上の複数の外部リンクを継続的にクリックすると、ポップアップウィンドウが毎回正しく表示されますが、その中の「GO」ボタンは、最近クリックされたリンクの代わりにクリックされた最初の外部リンクに常にユーザーをリダイレクトします。

この問題の基本的な理由は、イベントプロセッサの蓄積にあります。元のコードスニペットで：

 $（function（）{
  $（ "a"）。各（function（index、item）{
    $（this）.on（ "click"、function（e）{
      if（this.hostname！= location.hostname）{
        let url = $（item）.attr（ "href"）;
        $（ "。モーダル"）。show（）;
        //問題はこちら：クリックするたびに新しいクリックハンドラーが追加されます
        $（ '＃redirectbutton'）。クリック（function（）{
          open（url、 '_blank'）;
        }）;
      }
    }）;
  }）;
}）;

ユーザーが外部リンクをクリックするたびに、if（this.hostname！= location.hostname）条件が保持され、モーダルウィンドウが表示され、新しいクリックイベントハンドラーが#redirectbutton要素にバインドされます。これは、ユーザーが3つの異なる外部リンクをクリックすると、#RedireCtButtonに3つのクリックイベントハンドラーがあることを意味します。ユーザーが最終的に#RedireCtButtonをクリックすると、3つのプロセッサが順番に実行されますが、閉鎖性のために、各プロセッサは作成時にURL変数の値を「記憶」します。実際の動作では、ブラウザはすべてのジャンプを実行する場合がありますが、ユーザーは通常、最後のジャンプのみを観察するか、連続したOpen（）呼び出しのために予期しない動作を引き起こします。より一般的なのは、イベントの泡立ちと実行の順序により、ユーザーエクスペリエンスが常に最初のリンクにジャンプすることを感じることです。

解決策：バインドされていない古いイベント

イベントハンドラーの蓄積の問題を解決するには、#redirectbuttonに既に存在するすべてのクリックイベントハンドラーが、新しいクリックイベントハンドラーをバインドするたびにブロックされていないことを確認する必要があります。 jQuery's off（）メソッドはこれのために作成されました。

$（ '＃redirectbutton'）を呼び出すことにより、新しいイベントをバインドする前に、#redirectbuttonをクリックするすべてのイベントハンドラーを削除できます。このようにして、毎回正しいURLを備えた最新のプロセッサのみがアクティブになります。

これが改訂されたコードの例です。

 $（function（）{
  //すべてのリンククリックイベント$（ "a"）。on（ "click"、function（e）{//イベントデリゲートまたはそれぞれなしで直接バインディングすることができます
    //外部リンクの場合は確認（this.hostname！== location.hostname）{
      E.PreventDefault（）; //デフォルトのリンクジャンプ動作を防止しますlet targeturl = $（this）.attr（ "href"）; //現在クリックされているリンクのURLを取得します

      //モーダルウィンドウ$を表示$（ "。モーダル"）。show（）;

      //新しいクリックイベントをバインドする前に、#redirectbutton $（ '＃redirectbutton'）のすべての古いクリックイベントハンドラーをアンインストールします。
        // Jump window.open（targeturl、 '_blank'）を実行します。
        //オプション：ジャンプ後にモーダルウィンドウを非表示// $（ "。モーダル"）。hide（）;
      }）;

      //モーダルウィンドウに閉じるボタンがあると仮定すると、$（'。MODAL.CLOSE-BUTTON '）を処理する必要があります。
        $（ "。モーダル"）。hide（）;
      }）;
    }
  }）;

  //モーダルウィンドウの背景クリックも$（ '。モーダル'）を閉じることができると仮定します。
    if（$（e.target）.hasclass（ 'modal'））{//モーダルボックスコンテンツの代わりに背景がクリックされていることを確認してください$（this）.hide（）;
    }
  }）;
}）;

コード説明：

1. E.PreventDefault（）;：外部リンクのデフォルトのジャンプ動作をブロックして、ポップアップウィンドウでジャンプを制御できるようにします。
2. let targeturl = $（this）.attr（ "href"）;：現在クリックされている外部リンクのhref属性値を取得します。これは、ジャンプしたいターゲットURLです。
3. $（ '＃redirectbutton'）。off（ 'click'）。
   • off（ 'click'）：#redirectbuttonで以前にバインドされたすべてのクリックイベントハンドラーを削除します。
   • .on（ 'Click'、function（）{...}）：新しいクリックイベントハンドラーをバインドします。このプロセッサは、ボタンがクリックされたときに[閉鎖を介して）[閉鎖を介して] window.open（targeturl、 '_blank'）を実行する最新値をキャプチャします。

メモとベストプラクティス

1. イベント委任：イベント委任の使用は、ページに動的に追加または削除される要素（フォーラムの新しい投稿リンクなど）、またはページに同じタイプの多数の要素がある場合に効率的です。イベントハンドラーを親要素にバインドし、イベントバブルを使用して子要素のイベントを処理します。

    $（document）.on（ "click"、 "a"、function（e）{
     if（this.hostname！== location.hostname）{
       E.PreventDefault（）;
       let targeturl = $（this）.attr（ "href"）;
       $（ "。モーダル"）。show（）;
       $（ '＃redirectbutton'）。off（ 'click'）。on（ 'click'、function（）{
         window.open（targeturl、 '_blank'）;
       }）;
       //モーダルウィンドウのクロージングロジックが正しいことを確認してください$（'。MODAL.CLOSE-BUTTON '）。
         $（ "。モーダル"）。hide（）;
       }）;
     }
   }）;

   ここでは、クリックイベントがドキュメントにバインドされています。タグがクリックされると、イベントはドキュメントに泡立ち、on（）メソッドがセレクターAが一致するかどうかを決定します。

2. モーダルウィンドウの閉じるロジック：モーダルウィンドウに明確なクロージングメカニズム（閉鎖ボタン、バックグラウンドをクリックするなど）があること、およびこれらのクロージングイベントの取り扱いも繰り返されるバインディングを避けるか、それらが1回だけ実行されることを確認する必要があることを確認してください。上記の修正コードには、閉じたボタンとバックグラウンドのクリックの例も閉じて閉じます。

3. URLストレージ方法：閉鎖を通じてターゲットをキャプチャすることに加えて、別の方法は、ターゲットURLをモーダルウィンドウ自体のデータプロパティに保存することです。外部リンクがクリックされると、モーダルウィンドウのData-URLプロパティが更新され、＃RedirectTonのClickイベントハンドラーは、モーダルウィンドウからこのData-URLを読み取ることができます。このアプローチにより、＃redirectbuttonのイベントは、毎回リブをする必要がないため、より「静的」に結合しています。

    //外部リンクがクリックされたとき$（document）.on（ "click"、 "a"、function（e）{
     if（this.hostname！== location.hostname）{
       E.PreventDefault（）;
       let targeturl = $（this）.attr（ "href"）;
       $（ "。モーダル"）。data（ "Target-url"、targeturl）.show（）; // urlとdisplayを保存}
   }）;
   
   // #redirectButtonイベントは$（ '＃redirectbutton'）の1回のみバインドされます。
     let urltoopen = $（ "。モーダル"）。data（ "Target-url"）;
     if（urltoopen）{
       window.open（urltoopen、 '_blank'）;
       $（ "。モーダル"）。hide（）; //ジャンプ後に非表示}
   }）;
   //モーダルウィンドウを閉じるボタン$（'。MODAL.CLOSE-BUTTON '）。
     $（ "。モーダル"）。hide（）;
   }）;

   このアプローチは、動的データを静的イベントバインディングから分離するため、一部のシナリオでは明確になる場合があります。

4. ユーザーエクスペリエンス：ユーザーの信頼感を高めるために、モーダルウィンドウでリダイレクトされるURLを明確に表示することを検討してください。

要約します

JQUERY、特にポップアップまたはインタラクティブコンポーネントで動的イベントバインディングを処理する場合、OFF（）メソッドを理解して正しく使用して、古いイベントハンドラーを元に戻すことが重要です。これにより、イベントプロセッサの蓄積によって引き起こされる論理エラーと予期しない動作を効果的に回避できます。 off（）。on（）チェーンコールを使用すると、イベントハンドラーが常に最新かつユニークであり、ユーザーインタラクションを正確に制御できるようにすることができます。同時に、イベントの委任と合理的なURLデータ管理戦略を組み合わせることで、コードの堅牢性と保守性をさらに向上させることができます。

以上がjQueryポップアップウィンドウでの動的外部リンクジャンプのイベント処理を最適化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。