設計案--モバイル端末が300 ms遅延した原因と解決策

一、前言
モバイルブラウザには、ダブルクリック(double tap)スケールという特殊な機能があります.
 
二、移動端が300 ms遅延した原因
なぜタッチイベントを使うのですか?タッチイベントは、モバイルブラウザ特有のhtml 5イベントです.
移動端のclickには大きな遅延(約300 ms)があるため、300 msの遅延は、後続の動作が発生していないと判断するためにデフォルトの待機時間が終了した場合にのみclickイベントがトリガーされるため、判断ダブルクリックと長押しから生じる.タッチイベントの遅延は非常に短く,タッチイベントを用いることでページ応答速度を向上させ,より良いユーザ体験をもたらす.
ポイント:モバイル側はダブルクリックでスケールするこの操作があるため、ブラウザはclickの後に300 ms待って、ユーザーが次のクリックをしたかどうか、つまり今回の操作がダブルクリックしたかどうかを見ます.
 
三、ブラウザ開発者の解決方案
1、シナリオ1:拡大・縮小を無効にする
HTMLドキュメントヘッダに次のようなmetaのラベルが含まれている場合:

"viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

このページがズーム不可であることを示すと、ズームをダブルクリックする機能は意味がありません.ブラウザはデフォルトのダブルクリックズーム動作を無効にし、300 msのクリック遅延を削除することができます.
欠点:スケールを完全に無効にすることでクリック遅延を除去する目的を達成しなければならないが、スケールを完全に無効にするのは私たちの初心ではなく、デフォルトのダブルクリックスケール動作を無効にしたいだけで、300 msを待たずに現在の操作がダブルクリックであるかどうかを判断する必要はありません.しかし、通常は、画像を拡大したり、小さな文字を拡大したりするなど、ページをダブル指で拡大したりすることを望んでいます.
 
2、シナリオ2:デフォルトのビューポートウィンドウを変更する
デスクトップサイトがモバイルブラウザで正常に表示されるように、モバイルブラウザのデフォルトのビューポート幅!=デバイスブラウザのウィンドウ幅ではなく、ビューポート幅はデバイス幅よりも大きく、通常は980 pxです.
以下のラベルで、ビューポートの幅をデバイスの幅に設定できます.

"viewport" content="width=device-width">

 
移動端座に適しすぎて最適化されているので、このときダブルクリックでスケールする必要はありません.1つのウェブサイトが応答型のウェブサイトであることを認識できれば、モバイル端末ブラウザはデフォルトのダブルクリックズーム動作を自動的に禁止し、300 msのクリック遅延を削除することができる.上記のmetaラベルが設定されている場合、ブラウザは、モバイル側に適した最適化が行われていると判断し、ズーム操作をダブルクリックする必要はありません.
このシナリオがシナリオ1と比較される利点は、ズームを完全に無効にするのではなく、ブラウザのデフォルトのダブルクリックズーム動作を無効にするだけで、ユーザーはダブル指ズーム操作でページをズームすることができます.
 
シナリオ3:cssのtouch-action
IE以外のほとんどのブラウザでは、この新しいCSS属性はサポートされていません.touch-actionというCSS属性.このプロパティは、対応する要素でトリガーできるユーザーエージェント(つまりブラウザ)のデフォルトの動作を指定します.この属性値をtouch-action:noneに設定すると、要素上の操作がユーザエージェントのデフォルト動作をトリガーしないことを示し、300 msの遅延判定を行う必要はありません.
 
四、コード解決方案
1、方案一:ポインタイベントpolyfill
IE以外のほとんどのブラウザではポインタイベントはサポートされていません.ポインタイベントを事前に使用できるJSライブラリがあります.例:
(1)グーグルのPolymer
(2)マイクロソフトのHandJS
(3)@Rich-HarrisのPoints
関心はポインタイベントではなく,300 ms遅延に関連するCSS属性touch-action。 IE CSS ， polyfill 。 JS ， touch-actionをhtmlタグの とする.
 
2、 :FastClick
FastClickは、FTLabsがモバイルブラウザの300ミリ クリック を するために した のライブラリです.FastClickの は,touchendイベントが されると,DOMカスタムイベントを して ちにclickイベントをシミュレートし,ブラウザの300 ms のclickイベントを することである.
 
、 をクリック
が300 ms するという と, が するという も せざるを ない.クリックに300 msの がある 、タッチスクリーンに してtouchstartイベントを すればいいのではないでしょうか.
touchstartを してclickイベントの わりに2つの いところがあります.
:touchstartは でスクリーンに れるとトリガーされ、 にはユーザーがスクリーンをスライドしたいだけで、touchstartイベントをトリガーします.これは たちが んでいる ではありません.
に、touchstartイベントを すると、いくつかのシーンでクリックスルーが する があります.
1、クリックスルーとは?
ページに2つの AとBがある .B はA の にある.B のtouchstartイベントにB を す を たすコールバック を した.B をクリックすると、B が され、A がclickイベントをトリガーすることが かった.
これは、モバイルブラウザでイベント の がtouchstart>touchend>clickであるためです.clickイベントには300 msの があり、touchstartイベントがB を した 、300 ms でブラウザがclickイベントをトリガーしたが、このときB がなくなったため、このイベントはA に された.A がリンクされている 、ページは にジャンプします.
 
2、クリックスルー の3つの
(1) をクリック:マスク の じるボタンをクリックし、マスクが えた 、ボタンの の のclickイベントがトリガーされたことを する.
(2)ページ クリックスルーの :ボタンの にhref のあるaラベルがちょうどある 、aラベルジャンプはデフォルトでclickイベントトリガであるため、 は と く じである
(3)クリックスルーの : はmaskがなく、ページ のボタンを クリックして しいページにジャンプし、 しいページの する のclickイベントがトリガーされたことを した.
 
3、
2つの え :
(1)touchとclickを しない.touchの 300 msでclickがトリガーされる 、touchだけでもclickだけでも はありません.
(2)touchを った(あるいは した) のclick. としてtapを って、ただクリックして する がある で の をして、 かを って って、あるいはtapの で350ミリ れてmask、pointer-eventsを して、 の のイベントプロセッサの で します(グローバルflagに します)
:
(1)touchのみ
も な は、クリックスルーの を に します.
ページ のすべてのclickをtouchイベントtouchstart,’touchend’,’tap’にすべて するには,aラベルに に する があり,aラベルのhrefもclickであり,js に したジャンプを するか,span+tap に してジャンプを する がある.
(2)clickのみ
300 msの をもたらすため、ページ の のカスタムインタラクションは300ミリ の を させ、 えてみれば い.touchを しないと、touch 300 msでclickがトリガーされるという はありません.
(3) で める
な だから、 に わないでください. については、【モバイル・エンドの に する の 】javascriptイベント・メカニズムの (モバイル・ に する)を してください.
(4)tap 350 ms mask
も さく して、 はmaskが くなったことを すことで、350 msはやはり く じることができます.
(5)pointer-events
で があり、 をお めしません.maskが になったら、ボタンの の にpointer-events:none;スタイルは、clickを り け、350 ms にこのスタイルを し、 を します. はmaskが えた350 ms で,ボタンの の が して していないのがユーザに られ,ユーザの が いと ず される.
(6) の のイベントプロセッサで する(グローバルflagに わせる)
なので、お めしません.グローバルflagレコードボタンがクリックした ( )は、 の のイベントプロセッサでeventの を し、 じであればその らしいclickであり、 を する.
(7)fastclick
いやすいソリューションは、 KBを くロードしてもかまいません.バグに した がいるので、 することをお めしません. は、Fastclickがclickイベントを2 トリガーした を してください.
 
まずfastclickライブラリを し、ページ のすべてのtouchイベントをclickに するのはちょっと ですが、これらのKBを するのは を するために がないので、 の を うほうがいいですね.
 
、ブラウザイベントのトリガの
touchstart-->mouseover( のブラウザでは されていません)-->mousemove( )-->mousedown-->mouseup-->click-->touchend
Touchイベントでは,touchstart,touchmove,touchendの3 がよく いられる.このほかtouchcancelもあります. イベントにはtapイベントはありません.
イベントの は のとおりです.
≪イベント｜Events｜ldap≫

トリガタイミング
touchstart
タッチを
がスクリーンに れるとすぐにトリガーされます
touchmove
またはドラッグ
システムとブラウザに
touchend
タッチエンド
がスクリーンを れるとすぐに します
Touchイベントのトリガは を し,マルチタッチ,ドラッグ などがある.いくつかの なパラメータを に します.
パラメータ

touches
の リスト
targetTouches
touchesと に, じノードの をフィルタリングする.
changedTouches
のイベントに する の リスト
コードは のように されます.

elemenrRef.addEventListener('touchstart', function(e) {   
    console.log(e.touches, e.targetTouches, e.changedTouches);} );

 
がタッチイベントをトリガーするプロセスは、 のとおりです.
touchstart-->mouseover( のブラウザでは されていません)-->mousemove( )-->mousedown-->mouseup-->click-->touchend
これにより,ontouchstartイベントにタッチ ,ontouchendにタッチ を することができる.これらのパラメータにより, クリックの を に し, の を む に する をクリックする.
 
【 : はsaucxsで、songEagleとも ばれて、 はコードを いて、 はsau コミュニティに しますhttps://www.mwcxs.top)、 たちが もっと らしい を むことに してください.