web-dev-qa-db-ja.com

ページをよりレスポンシブにするために、イベントハンドラを「パッシブ」としてマークすることを検討してください。

私はドラッグにハンマーを使用しています、そしてこの警告メッセージが私に言っているので、他のものをロードするとき、それは途切れています。

メインスレッドがビジーであるため、 'touchstart'入力イベントの処理がXミリ秒遅れました。ページの応答性を高めるために、イベントハンドラを「パッシブ」としてマーク付けすることを検討してください。

だから私はそのようにリスナーに「パッシブ」を追加しようとしました

Hammer(element[0]).on("touchstart", function(ev) {
  // stuff
}, {
  passive: true
});

しかし、私はまだこの警告を受けています。

javascriptjqueryangularjstouchhammer.js
183
Matt

初めてこの警告を受けた人たちのために、それはかなり最近（2016年夏）ブラウザに実装された Passive Event Listeners と呼ばれる最先端のEdge機能によるものです。 からhttps://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md ：

パッシブイベントリスナー は、タッチおよびホイールイベントリスナーをブロックするためのスクロールの必要性を排除することによって開発者がより良いスクロールパフォーマンスを選択できるようにするDOM仕様の新機能です。開発者は、preventDefaultを呼び出さないことを示すために、タッチリスナーとホイールリスナーに{passive：true}のアノテーションを付けることができます。この機能はChrome 51、Firefox 49に同梱され、WebKitにも搭載されました。 正式な説明はこちらをご覧ください。

以下も参照してください。 パッシブイベントリスナーとは何ですか？

あなたの.jsライブラリがサポートを実装するのを待つ必要があるかもしれません。

あなたがJavaScriptライブラリを介して間接的にイベントを処理しているなら、あなたはその機能に対するその特定のライブラリのサポートのなすがままになっているかもしれません。 2016年8月現在、主要な図書館がサポートを実施しているようには見えません。いくつかの例：

234
Anson Kao

これはメッセージを隠す

    jQuery.event.special.touchstart = 
    {
      setup: function( _, ns, handle )
      {
        if ( ns.includes("noPreventDefault") ) 
        {
          this.addEventListener("touchstart", handle, { passive: false });
        } 
        else 
        {
          this.addEventListener("touchstart", handle, { passive: true });
        }
      }
    };
2
Iván Rodríguez