Ruby on Railsでjquery_ujsコンポーネントの遅延速度の問題解決

jquery_ujsはrailsにとって非常に重要なコンポーネントであり、railsのデフォルトコンポーネントに含まれています.
jquery ujsには、確認ダイアログボックス、ajaxのトリガ、フォームコミットボタンの自動無効化など、非常に便利な機能が含まれています.本稿では、ajaxをトリガする機能について主に説明します.
簡単なラベル属性を追加することで、jquery ujsはJavaScriptコードを書く必要がなく、一般的なリンクまたはフォームをajaxコミットに変換できます.

上のコードは次のコードを生成します.

プロジェクトを じる

ユーザーがクリックすると、getの一般的なリクエストではなく、methodがpostのajaxリクエストであるアドレス/projects/1/closeをトリガーし、ajax呼び出しを実現するのが非常に便利になります.
ネットの速度が遅いことによる問題はすべてすばらしいものではありません.ネットの速度が遅いとき、jquery ujsのこの実現に問題が発生します.ドキュメントがまだロードされていない場合、ユーザーはリンクをクリックして、ページはリンクアドレスへのGET要求を開始して、ページはジャンプしますが、そのアドレスへのGET要求は存在しなくてもいいので、エラーが発生します.
あるユーザーはIssueについて話したことがありますが、開発者は受理していません.しかし、ネットの速度が遅いのは中国の国情で、問題は私たちが処理しなければなりません.CSS 3のいくつかの特性を借りて、この問題は実は解決しにくいわけではありません.

pointer-events
pointer-events: none;

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

この属性は要素のクリックイベントを禁止することができます.一般的にCSSは先にロードされているので、ページのロードが完了する前にjquery ujsに関連する要素にpointer-events:noneを適用することを制御します.スタイルは、ページのロードが完了した後にこのスタイルを除去することで、ネットの速度が遅い場合、ページのロードが完了していない場合、ユーザーがrmoteリンクをクリックしたことによるエラーを解決することができます.
ソリューションには、body要素にreadyというcss classが含まれていない限り、デフォルトでdata-remoteとdata-methodのプロパティを含むラベルはクリックできません.

[data-remote], [data-method] {
 pointer-events: none;

 button, input[type=submit] {
  pointer-events: none;
 }
}

body.ready {
 [data-remote], [data-method] {
  pointer-events: auto;

  button, input[type=submit] {
   pointer-events: auto;
  }
 }
}

その後、簡単なスクリプトでページをロードしてbody要素にready classを追加します.

$(document).ready ->
 $('body').addClass('ready')

そこで、問題は簡単に解決した.