封装移动端单击事件
来源:互联网 发布:linux查数据库相互命令 编辑:程序博客网 时间:2024/06/14 22:32
因为pc端click事件在移动端会有延迟,所以只能通过移动端的触摸事件来模拟单击事件
var itcast={
/*dom:传入的dom元素让我们可以为任意的元素添加tap事件*/
tap:function(dom,callback){
/*判断是否传入对象同时对象应该是一个dom元素*/
if(!dom || typeof dom!="object"){
return;
}
var startTime,startX,startY;
dom.addEventListener("touchstart",function(e){
/*判断是否只有一根手指进行操作*/
if(e.targetTouches.length > 1){ //说明不止一个手指
return;
}
/*记录手指开始触摸的时间*/
startTime=Date.now();
/*记录当前手指的坐标*/
startX= e.targetTouches[0].clientX;
startY= e.targetTouches[0].clientY;
/*来做一些与事件相关的初始化操作*/
})
/*touchend:当手指松开时候触发,意味着当前元素上已经没有手指对象了,所以无法通过targetTouches来获取手指对象*/
dom.addEventListener("touchend",function(e){
/*判断是否只有一根手指进行操作*/
if(e.changedTouches.length > 1){ //说明不止一个手指
return;
}
if(Date.now()-startTime > 150){ //长按操作
return;
}
/*判断松开手指时的坐标与触摸开始时的坐标的距离差异*/
var endX=e.changedTouches[0].clientX;
var endY=e.changedTouches[0].clientY;
/*这里暂且将距离差异定为6*/
if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){
console.log("这就是移动端的单击事件--tap事件");
/*执行tap事件响应后的处理操作*/
/*判断用户是否传入的回调函数*/
callback && callback(e);
}
})
}
};
- 封装移动端单击事件
- 移动端tap轻触事件封装
- web移动端触摸事件封装
- 自行封装移动端touch事件
- 简易封装移动端touch事件
- opengl中鼠标移动、单击、滚轮事件
- MyWidget MyLabel-- 重写 -- 双击/单击/移动/事件
- 解决android 单击事件和移动事件的冲突
- 移动端JS之轻敲tap事件的封装
- 【触摸事件】单击移动图片+双指放大缩小图片
- 单击事件
- 移动端点击事件、滑动事件、长按事件封装
- ImageView单击事件、单击跳转
- unity 单击移动
- 手机端用单击事件模拟双击事件
- VC6捕获鼠标事件(移动、单击等)的一些总结(MFC消息、DriectInput、钩子)
- VC6捕获鼠标事件(移动、单击等)的一些总结(MFC消息、DriectInput、钩子)
- 移动端 触摸事件
- 【c++基础】12.c++字符串操作
- linux 创建一个文件
- Linux后台启动程序以及打开XShell连接运行java -jar然后关闭连接程序不再运行问题
- Summary
- scikit-learn/ID3手写数字识别
- 封装移动端单击事件
- [PAT-甲级]1022.Digital Library
- Codevs 1907 方格取数 3 最小割
- 【c++进阶】深入理解static关键字
- 【基础】图像梯度
- c语言解析ip的主要代码
- linux 安装memchached
- ionic后退造成的闪退解决方案
- Tensorflow中把稀疏的数字类别标签转为向量类型并计算loss和accuracy(附对mnist的损失函数值cross_entropy的理解)