识别拖动与点击操作之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;

时间: 2024-10-13 11:36:01

识别拖动与点击操作之zepto的bug的相关文章

sikuli点击操作无效解决办法

最近研究sikuli做一个自动化操作的小工具,利用sikuli图像识别的能力模拟鼠标.键盘操作.脚本编写容易,调试时候却发现鼠标可以移动到键盘精灵的操作按钮,点击按钮不起作用.通过测试发现,sikuli脚本操作浏览器.windows窗口点击操作有效,使用操作系统是win7.找了很久也没有解决办法.后来发现这其实windows权限导致的,因为键盘精灵是以administrator权限启动的,而sikuli是以当前普通用户启动.所以sikuli程序是没有权限操作该软件的.解决的办法是:以admini

使用ButterKnife注解框架实现View的点击操作

使用ButterKnife注解式框架可以简化代码的书写,尤其是对一些控件的操作.不再需要findViewById(...),setOnClickListener(...),内部类,实现接口等方法来设置View的监听器.使代码更为简洁高效. Android中的控件统称为View.本案例将会选择Button来简单模拟View被点击的过程.具体实现代码如下: public class MainActivity extends Activity { /** * 在这里变量和xml控件进行了绑定,从某种意

Android中使用4种方式实现按钮点击操作

在Android开发中,对控件的操作是最基本的技术,尤其是对按钮的点击操作.我以下总结了4种按钮点击的实现方式.与大家分享,希望大家批评指正. (1)匿名内部类实现 这种方式是最简单的实现,一般刚开始学习Android或者学习基于用户界面的开发,该方法是必学的.实现代码如下: public class MainActivity extends Activity { private Button button; @Override protected void onCreate(Bundle sa

appium中点击操作

1.方法一,使用tap tap有两个参数,元素位置和点击持续时间. 一般语法是这样的tap((x1,y1),(x2,y2)],100), 我们通过手机百度中,利用tap方法来点击摄像头按钮来举例. 1.元素定位 记住上面的元素坐标,下面需要用到. 2.tap代码实现 import os import time from appium import webdriver desired_caps ={ 'platformName': 'Android', 'platformVersion': '6.

项目中实现虚拟点击操作

一.HTML中的data属性    使用data属性来嵌入自定义的数据   data-*="  " 在项目中有一个问题,经常需要获得当前行或者一个位置的值,比如我项目中需要在后台php文件中foreach循环输出一行<tr>,然后将这个<tr>传到前台页面中, foreach ($res as $k => $v) { $str .= "<tr> <td>{$v['0']}</td> <td><

Web API---DOM---点击操作---节点的方式---案例

点击操作---节点的方式---案例 案例1:点击按钮,设置p变色---节点的方式做 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 200px; height: 200px; border: 1px solid hotpin

在浏览器屏蔽右键、文本选择、文本拖动、复制等操作

事件 说明  oncontextmenu   在用户点击鼠标右键打开上下文菜单时触发   onselectstart  在用户开始选取元素时触发  onselectstart  在用户开始拖动元素时触发  oncopy  在用户拷贝元素内容时触发 当事件被触发,使用 return false; 语句能够禁用默认的事件行为. <html> <head> <title>hello</title> <script type="text/javasc

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

今天想做windows上的自动化,所以才有了模拟鼠标点击的需求,先考虑用powershell实现: 首先先安装一个名为“WASP”免费可用的Powershell扩展程序,下载地址:http://wasp.codeplex.com/ 下载解压之后放到C:\Windows\System32\WindowsPowerShell\v1.0\Modules\下,如图: 之后,在开始->运行处输入powershell,以管理员方式运行, 执行Import-Module WASP,则引入了扩展程序, 假如有个

PopupWindow实现仿iOS QQ音乐上拉菜单栏(支持手势以及点击操作)

转载请注明出处:王亟亟的大牛之路 能力OK的小伙伴可以不看N2,源码在最下面 今天早上一个Andorid群的小伙伴问了我一些PopupWindow的问题,正好昨天晚上我注意到QQ音乐的一个菜单栏,那么今天就按照那个实现做一下(UI瞎凑合的你懂的) 先上下原图: 再贴一下我们的效果(除了长得不像也没什么,哈哈哈): 功能实现: 1:底部PopupWindow呈现 2:手势动作操作控件 3:按钮操作控件 4:控件内部的点击事件 How to do? 分析: 首先这是一个标准的底部的PopupWind