fastclickの紹介と使用


fastclickの紹介と使用
  • エンドポイントショット遅延イベント
  • を移動する.
  • 解決策
  • エンドポイントショット遅延イベントの移動
  • モバイル端末ブラウザはクリックイベントを配信する際、通常300 ms程度の遅延
  • が現れる.
  • 原因:移動端のダブルクリックによるスケールによりclick判定が
  • 遅延する.
    解決策
  • ズームを無効にするの欠点:Webページが
  • をズームできない
  • デフォルトビューポート幅を変更する欠点:ブラウザのサポートが必要
  • css touch-action touch-actionのデフォルトはautoで、noneに設定するとターゲット要素の300ミリ秒遅延が除去されます.新しいプロパティでは、ブラウザ互換性の問題がある可能性があります.
  • tapイベントzeptoのtapイベントはtouchstartとtouchendを利用してclickイベントの欠点をシミュレートする:
  • をクリックして貫通する
  • fastclick原理:touchendイベントが検出されると、DOMカスタムイベントによって直ちにclickイベントがシミュレートされ、ブラウザが300 ms後に本当のclickイベントをブロックする欠点:スクリプトが比較的大きい使用:
    
    //   
    
    
    
    //    jquery   
    
    $(function() {
    
        FastClick.attach(document.body);
    
    });
    
    //    jquery   
    
    if ('addEventListener' in document) {
    
        document.addEventListener('DOMContentLoaded', function() {
    
            FastClick.attach(document.body);
    
        }, false);
    
    }
    
    
    vueで
    
    //   
    
    npm install fastclick -S
    
    //   
    
    import FastClick from 'fastclick'
    
    //   
    
    FastClick.attach(document.body);
    
    
  • を する