识别拖动与点击操作之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 我们使用上中下线性布局,采用 ...
随机推荐
- springboot 拦截器
拦截器的实现: 创建自定义拦截器CustomInterceptor: package com.xc.boot.handler; import org.springframework.stereotyp ...
- 主席树[可持久化线段树](hdu 2665 Kth number、SP 10628 Count on a tree、ZOJ 2112 Dynamic Rankings、codeforces 813E Army Creation、codeforces960F:Pathwalks )
在今天三黑(恶意评分刷上去的那种)两紫的智推中,突然出现了P3834 [模板]可持久化线段树 1(主席树)就突然有了不详的预感2333 果然...然后我gg了!被大佬虐了! hdu 2665 Kth ...
- 金融量化分析【day111】:Pandas-时间序列处理
一.时间对象处理 1.start 开始时间 df["2018-12-01":"2018-12-30"] 2.end 结束时间 df['2018'] ...... ...
- SNMP学习——v3 VACM
目录: ☆ SNMPv3视图访问控制模型 ☆ SNMPv3报文格式 ☆ VACM参数 ☆ Context Table ☆ Security To Group Table ...
- 第七节:语法总结(1)(自动属性、out参数、对象初始化器、var和dynamic等)
一. 语法糖简介 语法糖也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方 ...
- [物理学与PDEs]第3章习题2 仅受重力作用的定常不可压流理想流体沿流线的一个守恒量
设定常 (即 $\cfrac{\p {\bf u}}{\p t}={\bf 0}$).不可压缩 (设 $\rho=1$) 的理想流体所受的体积力仅为重力. 又设磁场满足条件: $({\bf H}\cd ...
- 消除导入MNIST数据集发出的警告信息
原本导入数据集你仅需这样: # Import MNIST data from tensorflow.examples.tutorials.mnist import input_data mnist = ...
- sql 发送邮件
一.启用Database Mail XPs功能. 查看Database Mail XPs功能是否打开,从返回结果来看,value为0说明没有打开,注意SQL Mail XPs是SQL Server早期 ...
- struts2简单入门-配置文件-struts.xml
struts.xml 作用:配置struts中的action,result,package,全局action,result,等等. 基本文件格式: <?xml version="1.0 ...
- [转]C语言的int最值问题,以及原码反码及补码
以2字节为例来说: 对于无符号的数值(原码反码及补码都一样),最大值为1111 1111 1111 1111=65535 最小值为0000 0000 0000 0000=0 对于有符号的来 ...