问题描述:给页面<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的更多相关文章

  1. OpenCV和selenum实现点击操作

    import cv2 as cv import numpy as np from PIL import Image, ImageDraw, ImageFont import os from selen ...

  2. JS---DOM---点击操作---part1---20个案例

    点击操作:------>事件: 就是一件事, 有触发和响应, 事件源 按钮被点击,弹出对话框 按钮---->事件源 点击---->事件名字 被点了--->触发了 弹框了---& ...

  3. JS---DOM---点击操作---节点的方式---案例

    点击操作---节点的方式---案例 案例1:点击按钮,设置p变色---节点的方式做 <!DOCTYPE html> <html lang="en"> < ...

  4. c#使用UIA进行模拟点击操作

    之前,我写过一篇c#使用spy进行模拟操作的文章,有朋友在留言中提到了UIA进行操作,今天也使用UIA重新实现一次对vnc窗体的控制测试. 实现目标 在server框内填入192.168.2.200 ...

  5. JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)

    由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...

  6. 使用powershell/vbs自动化模拟鼠标点击操作

    今天想做windows上的自动化,所以才有了模拟鼠标点击的需求,先考虑用powershell实现: 首先先安装一个名为“WASP”免费可用的Powershell扩展程序,下载地址:http://was ...

  7. AutoIT: 如何通过坐标相对位置来对无法识别的Menu以及GridView进行定位点击操作

    一般情况下,GridView中的数据来自数据库,我们通过Windows Info,是无法获取GridView中的信息的.而软件定制的Menu,很多时候无法通过系统提供的WinMenuSelectIte ...

  8. vue中解决拖动和点击事件的冲突

    BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup => ...

  9. Android 微信UI 、点击操作

    上一篇,我们介绍了微信界面的相关知识点.今天我们就来把微信的界面做出来. 首先我们新建一个layout-->LinearLayout-->weixin.xml 我们使用上中下线性布局,采用 ...

随机推荐

  1. springboot 拦截器

    拦截器的实现: 创建自定义拦截器CustomInterceptor: package com.xc.boot.handler; import org.springframework.stereotyp ...

  2. 主席树[可持久化线段树](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 ...

  3. 金融量化分析【day111】:Pandas-时间序列处理

    一.时间对象处理 1.start 开始时间 df["2018-12-01":"2018-12-30"] 2.end 结束时间 df['2018'] ...... ...

  4. SNMP学习——v3 VACM

    目录: ☆ SNMPv3视图访问控制模型    ☆ SNMPv3报文格式    ☆ VACM参数    ☆ Context Table    ☆ Security To Group Table     ...

  5. 第七节:语法总结(1)(自动属性、out参数、对象初始化器、var和dynamic等)

    一. 语法糖简介   语法糖也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方 ...

  6. [物理学与PDEs]第3章习题2 仅受重力作用的定常不可压流理想流体沿流线的一个守恒量

    设定常 (即 $\cfrac{\p {\bf u}}{\p t}={\bf 0}$).不可压缩 (设 $\rho=1$) 的理想流体所受的体积力仅为重力. 又设磁场满足条件: $({\bf H}\cd ...

  7. 消除导入MNIST数据集发出的警告信息

    原本导入数据集你仅需这样: # Import MNIST data from tensorflow.examples.tutorials.mnist import input_data mnist = ...

  8. sql 发送邮件

    一.启用Database Mail XPs功能. 查看Database Mail XPs功能是否打开,从返回结果来看,value为0说明没有打开,注意SQL Mail XPs是SQL Server早期 ...

  9. struts2简单入门-配置文件-struts.xml

    struts.xml 作用:配置struts中的action,result,package,全局action,result,等等. 基本文件格式: <?xml version="1.0 ...

  10. [转]C语言的int最值问题,以及原码反码及补码

    以2字节为例来说: 对于无符号的数值(原码反码及补码都一样),最大值为1111  1111  1111  1111=65535 最小值为0000  0000  0000  0000=0 对于有符号的来 ...