ネイティブ JS を使用してタップ イベントをカプセル化し、モバイル端末の 300 ミリ秒の遅延を解決します

FastClick

この問題を解決できる既製のプラグイン fastclick がありますが、欠点もあります。

GitHub 上のプラグインの最新バージョンのサイズは 25.4kb で、軽量化がトレンドです。だからできる限り節約してください。

その中心となるアイデアは、デフォルトのクリック時間をキャンセルし、現在の DOM ノードのタイプを判断し、対応する操作を実行することです。この判断プロセスは比較的面倒です。

MyTapEvent

私は最近 WeChat プロジェクトに取り組んでいます。fastclick プラグインにはいくつかの欠点があるため、主なアイデアは次のとおりです。

考え中

タップ イベントには touchstart が含まれています。 touchmove(微動))とtouchendの3つの状態

touchend後にコールバックメソッドが実行されます

Chromeブラウザのデフォルトの判断により、指のオフセット(水平or縦)15pxを超えるとスクロールと判断されタップイベントがキャンセルされます

指を長く押しすぎるとクリックとみなされません

プロトタイプを展開するにはHTMLElementを使用します。イベントを簡単に追加するには

シングルトン モードを使用して、一度だけロードされるようにします

OK、落ち着いてコードを書き始めてください。はるかに明確です:

if (!HTMLElement.prototype.addTapEvent) {
    HTMLElement.prototype.addTapEvent = function(callback) {        var tapStartTime = 0,
            tapEndTime = 0,
            tapTime = 500, //tap等待时间，在此事件下松开可触发方法
            tapStartClientX = 0,
            tapStartClientY = 0,
            tapEndClientX = 0,
            tapEndClientY = 0,
            tapScollHeight = 15, //水平或垂直方向移动超过15px测判定为取消（根据chrome浏览器默认的判断取消点击的移动量)
            cancleClick = false;        this.addEventListener('touchstart', function() {
            tapStartTime = event.timeStamp;            var touch = event.changedTouches[0];
            tapStartClientX = touch.clientX;
            tapStartClientY = touch.clientY;
            cancleClick = false;
        })        this.addEventListener('touchmove', function() {            var touch = event.changedTouches[0];
            tapEndClientX = touch.clientX;
            tapEndClientY = touch.clientY;            if ((Math.abs(tapEndClientX - tapStartClientX) > tapScollHeight) || (Math.abs(tapEndClientY - tapStartClientY) > tapScollHeight)) {
                cancleClick = true;
            }
        })        this.addEventListener('touchend', function() {
            tapEndTime = event.timeStamp;            if (!cancleClick && (tapEndTime - tapStartTime) <= tapTime) {
                callback();
            }
        })
    }
}

使用法

HTMLElement.addTapEvent(function(){    //do something...})
如：document.querySelect('#test').addTapEvent(function(){
    alert('this is a tap event');
})

ケース

これはモバイル ケースです。最初の 20 項目はタップ イベント、最後の 30 項目はクリック イベントです。効果を試して、2 つの方法の違いを感じてください。