移动端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();
移动端tap事件,消除300毫秒延迟的更多相关文章
- vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...
- fastclick:处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...
- 移动端tap事件(轻击、轻触)
一.问题 ①移动端也有click点击事件,click点击会延迟200~300ms ②因为点击的响应过慢,影响了用户体验,所以需要解决响应慢的问题 二.解决方案 ①使用tap事件:即轻击,轻敲,响应速度 ...
- js移动端tap事件封装
这几天做项目,发现移动端需要触摸事件,而click肯定是不行的,于是我对tap事件封装进行了搜索,找到了一篇文章,原文地址如下:http://www.jb51.net/article/50663.ht ...
- 移动端tap事件的封装
/*封装tap*/ cc.tap = function(dom,callback){ /* * 要求 没有触发 touchmove 事件 * 并且响应速度要比click快 */ if(dom & ...
- 移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
- 移动端click事件延迟300ms到底是怎么回事,该如何解决?
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- 移动端为何不使用click而模拟tap事件及解决方案
移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...
- 移动端click事件延迟300ms的原因以及解决办法[转载]
原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...
随机推荐
- GMM算法的matlab程序(初步)
GMM算法的matlab程序 在https://www.cnblogs.com/kailugaji/p/9648508.html文章中已经介绍了GMM算法,现在用matlab程序实现它. 作者:凯鲁嘎 ...
- PTA天梯 L3-007 天梯地图
L3-007 天梯地图 题目: 本题要求你实现一个天梯赛专属在线地图,队员输入自己学校所在地和赛场地点后,该地图应该推荐两条路线:一条是最快到达路线:一条是最短距离的路线.题目保证对任意的查询请求,地 ...
- Socket引子
=== ''' Socket网络编程: --应用层:http smtp dns ftp ssh snmp dhcp... 无论协议是什么本质上都是数据交换,总结为两种方式:收和发 --传输层(端口Po ...
- 最小生成树 A - 畅通工程
dalao视频:https://www.bilibili.com/video/av4768483 https://www.bilibili.com/video/av4768483?p=2 省政府“畅通 ...
- Hive数据仓库工具安装
一.Hive介绍 Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供简单SQL查询功能,SQL语句转换为MapReduce任务进行运行. 优点是可以通过类S ...
- 转://Window下安装Oracle ASM单实例数据库
之前做的Oracle ASM实验都是基于Linux或者Unix操作系统的,最近想试试如何在Windows环境下使用Oracle ASM.本文介绍如何在windows下创建裸设备,并创建ASM磁盘组以及 ...
- 【angularjs】使用angular搭建项目,图片懒加载资料
demo: <ion-view view-title="{{chat.name}}"> <style type="text/css"> ...
- Memcache分布式锁 转发 https://www.cnblogs.com/li150dan/p/9529090.html
在分布式缓存的应用中,会遇到多个客户端同时争用的问题.这个时候,需要用到分布式锁,得到锁的客户端才有操作权限 下面通过一个简单例子介绍: 这里引用的是Memcached.ClientLibrary.d ...
- OpenCV3计算机视觉Python语言实现笔记(二)
1. 图像与原始字节之间的转换 从概念上讲,一个字节能表示0到255的整数.目前,对于多有的实时图像应用而言,虽然有其他的表示形式,但一个像素通常由每个通道的一个字节表示. 一个OpenCV图像是.a ...
- echart自定义浮窗 增加点击事件
一:情景 做一个柱状图,需要在柱状图显示lable,并且浮窗上每个条目可以被点击或者跳转. 我使用的做图插件是echarts,但是echart的浮窗是图片,而且不可以被点击,不能识别html,而且这个 ...