模拟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应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
随机推荐
- coredata 关系的删除规则
http://blog.csdn.net/Hello_Hwc/article/details/46375517 关系的删除规则-Delete Rule Deny 关系的destination中只要有一 ...
- 【0624课外作业】将一个double类型的小数,四舍五入保留两位小数
package com.work0624; /** * 课外作业 *将一个double类型的小数,四舍五入保留两位小数 * @author L * */ import java.util.Scanne ...
- ORACLE中RECORD、VARRAY、TABLE、IS REF CURSOR 的使用及实例详解
ORACLE中RECORD.VARRAY.TAB.IS REF CURSOR LE的使用及实例详解 create or replaceprocedure PRO_RECORD_ROW_TAB_EXAM ...
- cin 和 getline 混用中需要注意的问题
这段时间在刷题过程中遇到一个cin和getline混合使用中的问题,解决之后记录如下: 先来看一段代码 #include <iostream> #include <string> ...
- pandas中的随机排序和抽样
1.随机重排序 使用take()随机排序 如: df.take([54]) #采取索引为54的数据 可以借助np.random.permutation()函数随机排序 permutation()函 ...
- C#基础-数组
数组定义 定义数组并赋值 int[] scores = { 45, 56, 78, 98, 100 }; //在定义数组时赋值 for(int i = 0; i < scores.Length; ...
- 如何用纯 CSS 创作一副国际象棋
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WyXrjz 可交互视频 ...
- GoF23种设计模式之行为型模式之命令模式
一.概述 将一个请求封装为一个对象,从而可以使用不同的请求对客户端进行参数化.对请求排队或记录请求日志,以及支持撤销的操作. 二.适用性 1.当抽象出待执行的动作以参数化某个对象的时候. 2.当需要在 ...
- python3爬取”理财大视野”中的股票,并分别写入txt、excel和mysql
需求:爬取“理财大视野”网站的排名.代码.名称.市净率.市盈率等信息,并分别写入txt.excel和mysql 环境:python3.6.5 网站:http://www.dashiyetouzi.co ...
- percpu之静态变量
参考:Linux内核同步机制之(二):Per-CPU变量 CPU私有变量(per-CPU变量) 动态PCPU变量 setup_per_cpu_areas()初始化per-cpu数据. static v ...