zoukankan      html  css  js  c++  java
  • 移动端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();

  • 相关阅读:
    文件输入使System.out.println("程序执行完毕!");这句话的内容输入到文件中
    TI CC2541.h的头文件 for IAR
    状态添加Android游戏开发十日通(4)行走,跳跃,碰撞检测
    命令分析分析企业内连接Exchange 移动设备!
    寄存器数据问题反馈集锦W5200/W5300相关
    发票选择SAP 校验发票时:科目5101140100已设置为与税务不相关
    重写方法Android中的HttpsURLConnection连接
    生成数组C面试题精选
    函数路径Croc Champ 2013 Round 2 题解java教程
    排名中国重读“发展Linux,中日两国之比较”有感java教程
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/7251290.html
Copyright © 2011-2022 走看看