识别拖动与点击操作之zepto的bug
问题描述:给页面<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 我们使用上中下线性布局,采用 ...
随机推荐
- python之路day05--字典的增删改查,嵌套
字典dic 数据类型划分:可变数据类型,不可变数据类型 不可变数据类型:元组,bool,int str -->可哈希可变数据类型:list,dict,set --> 不可哈希 dict k ...
- 洛谷P2120 [ZJOI2007]仓库建设 斜率优化DP
做的第一道斜率优化\(DP\)QwQ 原题链接1/原题链接2 首先考虑\(O(n^2)\)的做法:设\(f[i]\)表示在\(i\)处建仓库的最小费用,则有转移方程: \(f[i]=min\{f[j] ...
- 一种特殊的 jpg 图片: MagickProfileImage() sRGB.icc
原图,在 ps, 浏览器中显示这样: 在 ps 中另存为 web... [转换成 sRGB]选项没有勾选: 在 ps 中另存为 web... 勾选[转换成 sRGB]选项: 用 ImageMaigck ...
- 静态IP设置
先查看自动网络的ip地址,然后设置 cmd进入DOS输入命令:ipconfig /all 设置固定IP
- python 错误捕获机制分析
python语言是编程中使用率在Top 3之内的语言.python语言以灵活与简单著称,那么越是灵活的语言越需要判断出错的功力. 简单示例 以下是一个简单的错误程序,被除数不可为0,那么看看该代码的执 ...
- Silverlight Visifire控件应用去除图标的水印
首先,新建一个类,继承自Chart,重写LoadWatermark方法. 再创建图表实例的时候就不能new Chart实例了,直接使用MyCharts. 使用去除水印之前的图片: 使用去除水印之后的图 ...
- AB PLC分类
AB PLC产品更新速度还是挺快的,以前很多产品都停产了,所以分类也跟着调整,就目前而言: 一.主要类型 AB PLC按类型,主要分为三大类: • 小型:MicroLogix控制器 • 中型:Comp ...
- Trie树的二三事QWQ
写在前面 Trie,又称字典树,是一种用于实现字符串快速检索的多叉树结构.Trie的每个结点都拥有若干字符指针,若在插入或检索字符串时扫描到一个字符c,就沿着当前节点的c这个字符指针,走向该指针指向的 ...
- mybatis查询语句获取自增主键
第一种方式: 主键回填useGeneratedKeys 代表采用JDBC的Statment对象的getGeneratedKeys方法返回主键keyProperty 代表将用哪个POJO的属性去匹配这个 ...
- 微信app支付的坑
app支付商户申请,需注册并认证开放平台账号后电脑端登录开放平台官网:open.weixin.qq.com,[管理中心]->[移动应用],选择需要申请支付的应用,点击[查看]->[微信支付 ...