问题描述:给页面<a>标签绑定了tap事件,在移动设备上点击按钮貌似一切正常,可以响应。但是,把页面上下滑动几次之后,或者在滑动时手指滑动出移动屏幕之外,之后再点击按钮,就会发现第一次点击的时候事件没被触发,需要点击第二次才会正常,而且几乎是必现的。
问题分析:tap事件是用touchstart,touchmove,touchend这三个事件去实现的。但是为了区分【点击】和【拖动】两个动作,zepto用了deltaX和deltaY两个变量去分别记录手指在触碰到屏幕时到离开屏幕时的x轴和y轴距离,如果deltaX>30px或者deltaY>30px,则认为是【拖动】,就不会触发tap事件了。一切看似正常,但是细看一下,原来deltaX和deltaY的置0是在touchend里实现的!而移动设备上,有两种情况导致touchend事件没被触发。
1、快速划动屏幕多次;
2、手指划出屏幕边界。
这样deltaX和deltaY就不会被置0了,等到下次再点击的时候,deltaX和deltaY就有可能大于30px,导致tap事件不被触发。
解决方案:修改zepto代码,在touchstart时添加deltaX和deltaY的置0。
.on('touchstart MSPointerDown pointerdown', function(e){
deltaX = deltaY = 0;
识别拖动与点击操作之zepto的bug的更多相关文章
-
OpenCV和selenum实现点击操作
import cv2 as cv import numpy as np from PIL import Image, ImageDraw, ImageFont import os from selen ...
-
JS---DOM---点击操作---part1---20个案例
点击操作:------>事件: 就是一件事, 有触发和响应, 事件源 按钮被点击,弹出对话框 按钮---->事件源 点击---->事件名字 被点了--->触发了 弹框了---& ...
-
JS---DOM---点击操作---节点的方式---案例
点击操作---节点的方式---案例 案例1:点击按钮,设置p变色---节点的方式做 <!DOCTYPE html> <html lang="en"> < ...
-
c#使用UIA进行模拟点击操作
之前,我写过一篇c#使用spy进行模拟操作的文章,有朋友在留言中提到了UIA进行操作,今天也使用UIA重新实现一次对vnc窗体的控制测试. 实现目标 在server框内填入192.168.2.200 ...
-
JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)
由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...
-
使用powershell/vbs自动化模拟鼠标点击操作
今天想做windows上的自动化,所以才有了模拟鼠标点击的需求,先考虑用powershell实现: 首先先安装一个名为“WASP”免费可用的Powershell扩展程序,下载地址:http://was ...
-
AutoIT: 如何通过坐标相对位置来对无法识别的Menu以及GridView进行定位点击操作
一般情况下,GridView中的数据来自数据库,我们通过Windows Info,是无法获取GridView中的信息的.而软件定制的Menu,很多时候无法通过系统提供的WinMenuSelectIte ...
-
vue中解决拖动和点击事件的冲突
BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup => ...
-
Android 微信UI 、点击操作
上一篇,我们介绍了微信界面的相关知识点.今天我们就来把微信的界面做出来. 首先我们新建一个layout-->LinearLayout-->weixin.xml 我们使用上中下线性布局,采用 ...
随机推荐
-
FireDAC 连接SQL Server一些要注意的地方
TFDConnection: FetchOptions.Mode 设置为fmAll, 返回全部结果, 否则默认只返回前50条, 效果与open以后再执行FetchAll一样 Specifies how ...
-
ServiceStack Web Service 创建与调用简单示列
目录 ServiceStack 概念 ServiceStack Web Service 创建与调用简单示列 上篇文章介绍了ServiceStack是什么,本章进入主题,如何快速简单的搭建Service ...
-
zoj 3351 Bloodsucker(概率 dp)
题目:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4530 dp[i]表示现在存在i个吸血鬼要达成目标(全为吸血鬼)天数的数学 ...
-
50个Android开发技巧(24 处理ListView数据为空的情况)
在移动平台上为用户展示数据的一个经常用法是将数据填充进一个List内,而此时须要注意的一点就是: 原文地址:(http://blog.csdn.net/vector_yi/article/d ...
-
js计算时间差,包括计算,天,时,分,秒
收集两个计算时间差的计算方法代码片段: var date1=new Date(); //开始时间 var date2=new Date(); //结束时间 var date3=date2.getTim ...
-
代码托管工具 git
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...
-
使用 EXISTS 代替 IN 和 inner join
在使用Exists时,如果能正确使用,有时会提高查询速度: 1,使用Exists代替inner join 2,使用Exists代替 in 1,使用Exists代替inner join例子: 在一般写s ...
-
python解析XML笔记(etree)
近期梳理Weblogic数据源,数据源较多,但是每一个数据源在weblogic中是xml方式存在,所以想到批量解析xml,把数据放到数据库后来解决. 需要的数据源信息: WEBLOGIC_HOSTJD ...
-
PVS 7.6 部署教程
PVS 7.6 部署教程 1 PVS介绍 Citrix Provisioning Services採用流技术通过网络将单一标准桌面镜像,包含操作系统和软件按需交付给物理虚拟桌面.一方面实现同型号机器单 ...
-
自动生成数据库字典(sql2008) 转自 飘渺の云海
每次做项目的时候都要做数据字典,这种重复的工作实在很是痛苦,于是广找资料,终于完成了自动生成数据库字典的工作,废话少说,上代码. 截取一部分图片: 存储过程: SET ANSI_NULLS ON GO ...