android 4.4 zepto.tap 偶尔需点击两次 bug 分析

作者:feix760

怎么复现这个问题

1、首先随意的滑两次,每次滑长一些,不用滑重(碎屏就不好了~~)

2、再点击一次,之后立刻停住~

Oh, no 你肯定在我说停住之后再点了一下,你觉得你并没有点到~

反复试几次仔细发现,原来是要点两次!

为什么会这样

zepto 发出you tap me的嚎叫可以用下面代码归纳

$(document)                                                                      
    .on('touchstart', function() {                                               
        // 打酱油                                                                
    })                                                                           
    .on('touchmove', function() {                                                
        deltaX += XXX;                                                           
        deltaY += XXX;                                                           
    })                                                                           
    .on('touchend', function() {                                                 
        if (deltaX < 30 && deltaY < 30) {                                                                                                                
            // you tap me                                                           
            touch.el && touch.el.trigger(event)                                     
        }                                                                           
        deltaX = deltaY = 0;                                                                                                                              
    })                                                                           
    .on('touchcancel', function() {                                                 
        // 打酱油                                                                   
    });

Android 4.4 touch事件

长距离的滑动: touchstart - > touchmove(仅一次) -> touchcancel

短距离: touchstart - > touchmove(一次) -> touchend

事情发展到了这里,去下载最新的zepto发现也只在touchend里做了这件重要的事情

deltaX = deltaY = 0;   

哎~

看破红尘,上面的都不重要

Android 4.4 长距离的滑动touchmove只发生一次是不是让充满爱的FE瞬间变得忧伤了~

哈~,其实只需touchmove时e.preventDefault()

touchstart - > touchmove(仅一次) -> touchcancel

就能变成

touchstart - > touchmove(多次) -> touchend

(也不再是touchcancel了)

原文链接:http://ivweb.io/topic/55c5d4c8c222e3af6ce235aa

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MixLab科技+设计实验室

从网易《初心》H5里学到的一些

这篇文章可以作为之前写的一篇《技能之H5》的补充知识。 1、拖放 HTML5 标准的组成部分。 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。 ...

3116
来自专栏张戈的专栏

图片压缩瘦身好工具:Image Optimizer 绿色版 V5.10 下载

此次推荐的实用小软件是一款图片减肥工具,因为此时博主正在给表哥的公司做 CMS 网站,他发给我的产品图片都是都是 PSD 格式的,大小均为 45M~70MB,如...

3855
来自专栏一个会写诗的程序员的博客

20+个很棒的Android开源项目

20+个很棒的Android开源项目 本文摘自文章: 20+ Awesome Open-Source Android Apps To Boost Your D...

732
来自专栏coding

python使用PIL给图片添加文字生成海报

那时的我,对于未来有很多遐想:写小说、写时评、写诗歌... 总而言之,就是成为一个文字工作者

832
来自专栏Material Design组件

Human Interface Guidelines —— Collections

32411
来自专栏IMWeb前端团队

android4.4zepto.tap偶尔需点击两次bug分析

怎么复现这个问题 ? 1、首先随意的滑两次,每次滑长一些,不用滑重(碎屏就不好了~~) 2、再点击一次,之后立刻停住~ o, no 你肯定在我说停住之后再点了...

17810
来自专栏Crossin的编程教室

微信小游戏“跳一跳”,Python“外挂”已上线

微信又一次不声不响地搞了个大事情: “小游戏”上线了! ? 于是,在这辞旧迎新的时刻,毫无意外的又火了。 今天有多少人刷了,让我看到你们的双手! ? 喏,我已经...

26610
来自专栏Material Design组件

Human Interface Guidelines — Accessibility

1422
来自专栏Alan的UX笔记

UX笔记#01 |按钮用图标还是文字?

993
来自专栏ThoughtWorks

前端不止:请告诉我,你要什么样的图标

有一个英语成语叫做一画胜千言(A picture is worth a thousand words),不知道大家有没有听过?它是指的是一张静态的图片就可表达一...

3597

扫码关注云+社区