• 移动端tap事件,消除300毫秒延迟 广东靓仔


    引用这个之前,要讲一下首先我是用了webpack技术,所以你的项目如果没有用到这个的话,最好不要用这个技术,当然想用也可以,改下代码也可以用。

    下面的代码直接复制就可以用啦。

    ( function(element, factory) {'use strict';
    element.auiTap = factory(element, element.document);
    }( typeof window !== 'undefined' ? window : this, function(window, document) {'use strict';
    var auiTap = function() {
    this.el = window.document;
    this.moved = false;
    this.startX = 0;
    this.startY = 0;
    this.hasTouchEventOccured = false;
    this.el.addEventListener('touchstart', this, false);
    }
    auiTap.prototype.start = function(e) {
    if (e.type === 'touchstart') {
    this.hasTouchEventOccured = true;
    this.el.addEventListener('touchmove', this, false);
    this.el.addEventListener('touchend', this, false);
    this.el.addEventListener('touchcancel', this, false);
    }
    this.moved = false;
    this.startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
    this.startY = e.type === 'touchstart' ? e.touches[0].clientY : e.clientY;
    };

    auiTap.prototype.move = function(e) {
    var x = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
    var y = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;
    if (Math.abs(x - this.startX) > 10 || Math.abs(y - this.startY) > 10) {
    this.moved = true;
    }
    };

    auiTap.prototype.end = function(e) {
    var evt;
    this.el.removeEventListener('touchmove', this, false);
    this.el.removeEventListener('touchend', this, false);
    this.el.removeEventListener('touchcancel', this, false);
    if (!this.moved) {
    try {
    evt = new window.CustomEvent('tap', {
    bubbles : true,
    cancelable : true
    });
    } catch (e) {
    evt = document.createEvent('Event');
    evt.initEvent('tap', true, true);
    }
    e.stopPropagation();
    if (!e.target.dispatchEvent(evt)) {
    e.preventDefault();
    }
    }
    };
    auiTap.prototype.cancel = function() {
    this.hasTouchEventOccured = false;
    this.moved = false;
    this.startX = 0;
    this.startY = 0;
    };
    auiTap.prototype.destroy = function() {
    this.el.removeEventListener('touchstart', this, false);
    this.el.removeEventListener('touchmove', this, false);
    this.el.removeEventListener('touchend', this, false);
    this.el.removeEventListener('touchcancel', this, false);
    };
    auiTap.prototype.handleEvent = function(e) {
    switch (e.type) {
    case 'touchstart':
    this.start(e);
    break;
    case 'touchmove':
    this.move(e);
    break;
    case 'touchend':
    this.end(e);
    break;
    case 'touchcancel':
    this.cancel(e);
    break;
    }
    };
    return auiTap;
    }));
    module.exports = new auiTap();

  • 相关阅读:
    Permutations II
    LeetCode Sudoku Solver
    LeetCode Insert Interval
    LeetCode Unique Binary Search Trees II
    LeetCode Edit Distance
    LeetCode N-Queens II
    ListView自定义适配器--10.17
    Android开发--ListPreferance 运行报错:android.preference.ListPreference.findIndexOfValue(ListPreference.java:169)
    使用Genymotion作Android开发模拟器:安装Genymotion、部署Genymotion Vitrue Device、安装Genymotion eclipse插件
    Android ADB server didn't ACK * failed to start daemon * 简单有效的解决方案
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/7251290.html
Copyright © 2020-2023  润新知