模拟tap事件和longTap事件
(function(){
var TOUCHSTART, TOUCHEND;
if (typeof(window.ontouchstart) != 'undefined') {
TOUCHSTART = 'touchstart';
TOUCHEND = 'touchend';
TOUCHMOVE='touchmove';
} else if (typeof(window.onmspointerdown) != 'undefined') {
TOUCHSTART = 'MSPointerDown';
TOUCHEND = 'MSPointerUp';
TOUCHMOVE='MSPointerMove';
} else {
TOUCHSTART = 'mousedown';
TOUCHEND = 'mouseup';
TOUCHMOVE = 'mousemove';
}
function tap(node,callback,scope) {
var x,y,startTime=0,endTime=0,in_dis=false,bMoved=false;
node.addEventListener('touchstart', function(e) {
x = e.touches[0].pageX;
y = e.touches[0].pageY;
startTime= +new Date();
});
//完全不滑动
// node.addEventListener('touchmove',function(e){
// bMoved = true;
// });
node.addEventListener('touchend', function(e) {
e.stopPropagation();
e.preventDefault();
var bDisabled = hasClass(node,'disable') || hasClass(node,'disabled') || node.disabled;
if(!bDisabled){
var curx = e.changedTouches[0].pageX;
var cury = e.changedTouches[0].pageY;
//轻微滑动
if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
in_dis=true;
}else{
in_dis=false;
}
//or 完全不滑动
//in_dis = !bMoved;
endTime= +new Date();
if (endTime - startTime < 150 && in_dis) {
callback.apply(scope, arguments);
}
}
/*充值参数*/
startTime = 0;
in_dis = false;
//bMoved = false;
});
}
function longTap(node,callback,scope) {
var x,y,startTime=0,endTime=0,in_dis=false;
node.addEventListener(TOUCHSTART, function(e) {
x = e.touches[0].pageX;
y = e.touches[0].pageY;
startTime = +new Date();
});
node.addEventListener(TOUCHEND, function(e) {
e.stopPropagation();
e.preventDefault();
var bDisabled = hasClass(node,'disable') || hasClass(node,'disabled') || node.disabled;
if(!bDisabled){
var curx = e.changedTouches[0].pageX;
var cury = e.changedTouches[0].pageY;
if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
in_dis=true;
}else{
in_dis=false;
}
endTime = +new Date();
if (endTime - startTime > 300 && in_dis) {
callback.apply(scope, arguments);
}
}
/*重置参数*/
startTime = 0;
in_dis = false;
});
}
function hasClass(el, cls) {
if (!el || !cls) return false;
if (cls.indexOf(' ') != -1) throw new Error('className should not contain space.');
if (el.classList) {
return el.classList.contains(cls);
} else {
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
}
window.touch = {
tap: tap,
longTap: longTap
}
});
模拟tap事件和longTap事件的更多相关文章
- 移动端为何不使用click而模拟tap事件及解决方案
移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...
- Android(Linux)模拟按键、触摸屏等事件
前提: 在我们应用程序或者在写Android自己主动化測试时候经常会须要模拟实体按键,来给我们做測试用.这也是我要整理的目的. 基本的涉及的是Linux Input Event事件. 下面的样例基于A ...
- 移动端 之 触摸事件、Tap事件和swipe事件
触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触 ...
- jquery input 下拉框(模拟select控件)焦点事件
本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...
- javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- 背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件
[源码下载] 背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件 作者: ...
- js原生创建模拟事件和自定义事件的方法
让我万万没想到的是,原来<JavaScript高级程序设计(第3版)>里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法. 模拟鼠标事件MDN上已经说得很清楚,尽管为了保 ...
- 移动端tap或touch类型事件的点透问题认识
1.什么是点透? 举例说明:下图B元素是黄色方块,B元素中包含了C元素,C元素是一个a链接,本身自带click事件按,然后又一个半透明的粉色元素A遮盖在B元素上(看图中A元素是覆盖在B元素上的,不然B ...
- 手持设备点击响应速度,鼠标事件与touch事件的那些事
前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
随机推荐
- Ubuntu 16.04 换国内源
官方渠道,图形界面,操作简单,可以说对新手及其友好!! 依次打开:搜索,软件与更新,第一个和第三个勾上,下载自,其它,然后在中国条目下选择你想使用的镜像站点,然后点“选择服务器”,然乎点击“关闭”,选 ...
- CPP-基础:新标准 C++iostream
在新的标准 C++ iostream 库中: 1. open 函数不采用第三个参数(保护参数). 2. 无法从文件句柄创建流. 3. 除了几个例外,新的标准 C++ 库中的所有名称都在 std 命名空 ...
- 拨出网线后,网卡IP丢失
/etc/network/interfaces与NetworkManager 问题:在Centos7上把网线拨出后,发现网卡状态是down,并且网卡上的IP丢失 原因:此网卡被NetworkManag ...
- 毛毛虫组【Beta】Scrum Meeting 1
第一天 日期:2019/6/23 前言 第一次会议: 时间:6月20日 地点:教9-C404机房 内容:此次会议主要确定组内成员具体分工,并对目标进行了初步的确定. 1.1 今日完成任务情况以及遇到的 ...
- Ubuntu编译Android源码过程中的空间不足解决方法
Android源码一般几十G,就拿Android5.0来说,下载下来大概也有44G左右,和编译产生的文件以及Ubuntu系统占用的空间加起来,源码双倍的空间都不够有.编译源码前能分配足够的空间再好不过 ...
- mini_httpd的安装和配置
1.下载:http://www.acme.com/software/mini_httpd/mini_httpd-1.19.tar.gz 2.解压:tar zxvf mini_httpd-1.19.ta ...
- Web前端 优化方案
1.减少Http请求 在一个页面中图片,CSS,JS可能N个,如果每个资源都去请求一次服务器的话,那么服务器就会为每个资源开一个线程来完成,这样的话对服务器的压力就很大了.所以解决的方法就是合并资源 ...
- Golang 简单静态web服务器
直接使用 net.http 包,非常方便 // staticWeb package main import ( "fmt" "net/http" "s ...
- Golang ioutil读写文件测试
运用 ioutil.ReadFile .ioutil.WriteFile package main import ( "io/ioutil" "log" &qu ...
- Thinkphp5的安装
很长没有码代码了,现在开始做这件事情的意义已经完全与以前不一样了.因为最近有相当长的一段休息时间,是个学习的好时间啊.之前接触过TP3.2,听说后来的版本有挺大的改动,因此呢,现在终于有时间可以好好的 ...