识别拖动与点击操作之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 我们使用上中下线性布局,采用 ...
随机推荐
- P1742 最小圆覆盖(计算几何)
体验过\(O(n^3)\)过\(10^5\)吗?快来体验一波当\(wys\)的快感吧\(QAQ\) 前置芝士1:二元一次方程组求解 设 \[\begin{cases}a1 * x + b1*y=c1\ ...
- css实现弹出框
弹出框也是前端里面经常使用的一个应用场景了,最开始想到的是用js实现这个效果,看到codepen上面有用css实现的.其实就是用到了css里面的一个:target选择器+visibility属性. U ...
- JS学习笔记Day14
一.正则表达式 (一)正则的概念 1.正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去匹配符合规则的字符 (二)创建正则的方式 1.字面量的 ...
- python httpserver
python3: python -m http.server 80 python2: python -m SimpleHTTPServer 9004
- Web of science数据下载以数据处理
目标网站分析 我们要获取的就是这几个数值 程序实现 # -*- coding: utf-8 -*- """ @Datetime: 2019/2/28 @Author: Z ...
- Slow ReadProcessor&Error Slow BlockReceiver错误日志分析(转)
1.总结 "Slow ReadProcessor" 和"Slow BlockReceiver"往往是因为集群负载比较高或者某些节点不健康导致的,本文主要是帮助你 ...
- MyBatis # $区别
方式一: <select id="getUserById" resultType="User" parameterType=”int”> SELEC ...
- 51nod 1035 最长的循环节
正整数k的倒数1/k,写为10进制的小数如果为无限循环小数,则存在一个循环节,求<=n的数中,倒数循环节长度最长的那个数,假如存在多个最优的答案,输出所有答案中最大的那个数. 1/6= 0.1( ...
- Java开发之@PostConstruct和@PreDestroy注解
从Java EE5规范开始,Servlet增加了两个影响Servlet生命周期的注解(Annotation):@PostConstruct和@PreConstruct.这两个注解被用来修饰一个非静态的 ...
- Linux的错误码表
Linux的错误码表(errno table): _ 124 EMEDIUMTYPE_ Wrong medium type_ 123 ENOMEDIUM__ No medium found_ 122 ...