モバイル側が300 ms遅延した原因と解決策
6003 ワード
一、前言
モバイルブラウザには、ダブルクリック(double tap)スケールという特殊な機能があります.
二、移動端が300 ms遅延した原因
なぜタッチイベントを使うのですか?タッチイベントは、モバイルブラウザ特有のhtml 5イベントです.
移動端のclickには大きな遅延(約300 ms)があるため、300 msの遅延は、後続の動作が発生していないと判断するためにデフォルトの待機時間が終了した場合にのみclickイベントがトリガーされるため、判断ダブルクリックと長押しから生じる.タッチイベントの遅延は非常に短く,タッチイベントを用いることでページ応答速度を向上させ,より良いユーザ体験をもたらす.
ポイント:モバイル側はダブルクリックで拡大・縮小するこの操作があるため、ブラウザはclickの後に300 msを待つ必要があり、****はユーザーが次にクリックするかどうか、つまり今回の操作がダブルクリックするかどうかを見る.
三、ブラウザ開発者の解決方案
1、シナリオ1:拡大・縮小を無効にする
HTMLドキュメントヘッダに次のような
このページがズーム不可であることを示すと、ズームをダブルクリックする機能は意味がありません.ブラウザはデフォルトのダブルクリックズーム動作を無効にし、300 msのクリック遅延を削除することができます.
欠点:スケールを完全に無効にすることでクリック遅延を除去する目的を達成しなければならないが、スケールを完全に無効にするのは私たちの初心ではなく、デフォルトのダブルクリックスケール動作を無効にしたいだけで、300 msを待たずに現在の操作がダブルクリックであるかどうかを判断する必要はありません.しかし、通常は、画像を拡大したり、小さな文字を拡大したりするなど、ページをダブル指で拡大したりすることを望んでいます.
2、シナリオ2:デフォルトのビューポートウィンドウを変更する
デスクトップサイトがモバイルブラウザで正常に表示されるように、モバイルブラウザのデフォルトのビューポート幅!=デバイスブラウザのウィンドウ幅ではなく、ビューポート幅はデバイス幅よりも大きく、通常は980 pxです.
以下のラベルで、ビューポートの幅をデバイスの幅に設定できます.
移動端座に適しすぎて最適化されているので、このときダブルクリックでスケールする必要はありません.1つのウェブサイトが応答型のウェブサイトであることを認識できれば、モバイル端末ブラウザはデフォルトのダブルクリックズーム動作を自動的に禁止し、300 msのクリック遅延を削除することができる.上記の
このシナリオがシナリオ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属性
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イベント
(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
現在のイベントに応答する各指の情報リスト
コードは次のように取得されます.
指がタッチイベントをトリガーするプロセスは、次のとおりです.
touchstart-->mouseover(一部のブラウザでは実装されていません)-->mousemove(一度)-->mousedown-->mouseup-->click-->touchend
これにより,ontouchstartイベントにタッチ開始,ontouchendにタッチ終了情報を記録することができる.これらのパラメータにより,幽玄クリックの時間を容易に計算し,応答の座標状況を含む貫通に関する情報をクリックする.
モバイルブラウザには、ダブルクリック(double tap)スケールという特殊な機能があります.
二、移動端が300 ms遅延した原因
なぜタッチイベントを使うのですか?タッチイベントは、モバイルブラウザ特有のhtml 5イベントです.
移動端のclickには大きな遅延(約300 ms)があるため、300 msの遅延は、後続の動作が発生していないと判断するためにデフォルトの待機時間が終了した場合にのみclickイベントがトリガーされるため、判断ダブルクリックと長押しから生じる.タッチイベントの遅延は非常に短く,タッチイベントを用いることでページ応答速度を向上させ,より良いユーザ体験をもたらす.
ポイント:モバイル側はダブルクリックで拡大・縮小するこの操作があるため、ブラウザはclickの後に300 msを待つ必要があり、****はユーザーが次にクリックするかどうか、つまり今回の操作がダブルクリックするかどうかを見る.
三、ブラウザ開発者の解決方案
1、シナリオ1:拡大・縮小を無効にする
HTMLドキュメントヘッダに次のような
metaのラベルが含まれている場合:
このページがズーム不可であることを示すと、ズームをダブルクリックする機能は意味がありません.ブラウザはデフォルトのダブルクリックズーム動作を無効にし、300 msのクリック遅延を削除することができます.
欠点:スケールを完全に無効にすることでクリック遅延を除去する目的を達成しなければならないが、スケールを完全に無効にするのは私たちの初心ではなく、デフォルトのダブルクリックスケール動作を無効にしたいだけで、300 msを待たずに現在の操作がダブルクリックであるかどうかを判断する必要はありません.しかし、通常は、画像を拡大したり、小さな文字を拡大したりするなど、ページをダブル指で拡大したりすることを望んでいます.
2、シナリオ2:デフォルトのビューポートウィンドウを変更する
デスクトップサイトがモバイルブラウザで正常に表示されるように、モバイルブラウザのデフォルトのビューポート幅!=デバイスブラウザのウィンドウ幅ではなく、ビューポート幅はデバイス幅よりも大きく、通常は980 pxです.
以下のラベルで、ビューポートの幅をデバイスの幅に設定できます.
移動端座に適しすぎて最適化されているので、このときダブルクリックでスケールする必要はありません.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、方案二:****FastClickFastClickは、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にタッチ終了情報を記録することができる.これらのパラメータにより,幽玄クリックの時間を容易に計算し,応答の座標状況を含む貫通に関する情報をクリックする.