引用这个之前,要讲一下首先我是用了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();

移动端tap事件,消除300毫秒延迟的更多相关文章

  1. vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...

  2. fastclick:处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...

  3. 移动端tap事件(轻击、轻触)

    一.问题 ①移动端也有click点击事件,click点击会延迟200~300ms ②因为点击的响应过慢,影响了用户体验,所以需要解决响应慢的问题 二.解决方案 ①使用tap事件:即轻击,轻敲,响应速度 ...

  4. js移动端tap事件封装

    这几天做项目,发现移动端需要触摸事件,而click肯定是不行的,于是我对tap事件封装进行了搜索,找到了一篇文章,原文地址如下:http://www.jb51.net/article/50663.ht ...

  5. 移动端tap事件的封装

    /*封装tap*/ cc.tap = function(dom,callback){ /* * 要求 没有触发 touchmove 事件 * 并且响应速度要比click快 */ if(dom & ...

  6. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  7. 移动端click事件延迟300ms到底是怎么回事,该如何解决?

    不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...

  8. 移动端为何不使用click而模拟tap事件及解决方案

    移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...

  9. 移动端click事件延迟300ms的原因以及解决办法[转载]

    原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...

随机推荐

  1. java操作elasticsearch实现query String

    1.CommonTersQuery: 指定字段进行模糊查询 //commonTermsQuery @Test public void test35() throws UnknownHostExcept ...

  2. MySQL 初识别语句,数据库、表、行的增删改查

    一.MySQL 开场语句 1.登陆 mysql -u root -p ; #回车然后输入密码 2.退出 eixt | quit #二者选其一 3.查看数据文件路径(配置文件中学习的) show glo ...

  3. HTML做的网页 如何使当前页面跳转到另一页面锚点处

    当前页面a.html另一页面b.html当前页面: <a href="b.html#aaa">跳转到b页面aaa处</a>另一页面:<a name=& ...

  4. (转)Spring Boot(三):Spring Boot 中 Redis 的使用

    http://www.ityouknow.com/springboot/2016/03/06/spring-boot-redis.html Spring Boot 对常用的数据库支持外,对 Nosql ...

  5. Python中的Numpy入门教程

    1.Numpy是什么 很简单,Numpy是Python的一个科学计算的库,提供了矩阵运算的功能,其一般与Scipy.matplotlib一起使用.其实,list已经提供了类似于矩阵的表示形式,不过nu ...

  6. YOLO 从数据集制作到训练

    1.图片数据集收集 共 16种 集装箱船 container ship 散货船 bulker 油船 tanker 游轮 / 客轮 / 邮轮 passenger liner 渔船 fishing boa ...

  7. [python] RRT快速拓展随机树

    """ version1.1,2018-05-09 <基于智能优化与RRT算法的无人机任务规划方法研究>博士论文 <基于改进人工势场法的路径规划算法研究 ...

  8. luogu P4735 最大异或和

    嘟嘟嘟 省选竟然考了一个可持久化trie,就挑着我不会的考. 话说考场上我确实写了一个trie的做法,只不过一直没调出来然后就只剩暴力分了. 现在想想实在是太蠢了,明明对算法没有把握,却头脑一热在这题 ...

  9. P1451 求细胞数量(广搜)

    题意:就是0把是所有细胞圈起来了.而被圈起来的是所有数字全部为一个细胞问有多少个这样的细胞.(mmp,我读半天题) 思路:广搜索.就是,0的话就不放入了,不为0的话,就进入队列,然后,再看它的4个方向 ...

  10. P2089 烤鸡(搜索简单题)

    题意:就是x分别是1到3的未知数,求x1+x2+x3.....+x10=n的方案数和输出每种方案.每种方案还必须按字典序输出 思路:就是简单的构建搜索树+约束条件啊,其实数据范围一点都不大,所以,我第 ...