Webappページスクロールカートンの解決策

携帯電話のブラウザは、現在のページをスクロールする(ページをスケールする可能性もある)場合、デフォルトの動作がブロックされているため、ページが静止し、ユーザーの使用体験が悪くなり、スクロールページが停滞しているような気がします.
具体的な説明:touchstartイベントオブジェクトのcancelableプロパティはtrueであるため、すなわち、そのデフォルトの動作はpreventDefault()メソッドによってリスナーによって阻止されることができる.しかし、ブラウザは、リスナーがpreventDefault()を呼び出すかどうかを事前に知ることはできません.リスナーが実行してからデフォルトの動作を実行するしかありません.リスナーの実行には時間がかかり、時間がかかることもあります.ページカートンにつながることもあります.リスナーが空の関数であっても、一定のカートンが生成されます.結局、空の関数の実行にも時間がかかります.
addEventListenerのuseCaptureパラメータ
基本概念:xxx.addEventListener('イベント名',function(xxx){xxx},useCapture).最初のパラメータは、「click」などのonを含まないイベント名を表します.2番目のパラメータは、イベント処理を受信する関数を表します.3番目のパラメータはuseCaptureです.
これがどういう意味なのかを見てみましょう.直接例を挙げて説明するともっと直感的です.

var level1 = document.getElementById("level1");
var level2 = document.getElementById("level2");
var level3= document.getElementById("level3");
var info = document.getElementById("info");
outDiv.addEventListener("click", function () { info.innerHTML += "level1" + "
"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "level2" + "
"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "level3" + "
"; }, false);

上記のコードから見ると、このuseCaptureはtrueとfalseの作用効果です.

   false  ，     ：level3、level2、level1
   true  ，     ：level1、level2、level3
level1  true，    false  ，     ：level1、level3、level2
level2  true，    false  ，     ：level2、level3、level1
level3  true，    false  ，     ：level3、level2、level1
level1  false，    true ，     ：level2、level3、level1
level2  false，    true ，     ：level1、level3、level2
level3  false，    true ，     ：level1、level2、level3

上記の結果から以下の結論が得られた.

true          false   ；
       true，          ；
       false，          。

passiveプロパティによるイベント動作の制御
使用方法は以下の通りです.

addEventListener('   ', function(xxx){xxx}, {
    capture: false,
    passive: false,
    once: false
})

3つのプロパティはブールタイプのスイッチで、デフォルトはfalseです.

capture：       useCapture   ；
once：             ，          removeEventListener  ；
passive：  webapp touch  

携帯電話のブラウザがイベントを使用する場合、スクロールイベントリスナーの80%がデフォルトの動作を阻止しないことが分かった.つまり、ほとんどの場合、ブラウザは白などだ.したがって、passiveリスナーが誕生し、passiveの意味は「従順」であり、イベントのデフォルト動作にnoを言わないことを示し、ブラウザはリスナーがpassiveであることを知り、2つのスレッドでリスナーのJavaScriptコードとブラウザのデフォルト動作を同時に実行することができるようになった.