• 移动端触屏click点击事件延迟问题,以及tap的解决方案


    在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常明显,用我的iphone5执行下段测试代码,平均延迟在370毫秒!结果非常惊人,所以在移动端必须得用tap事件了,click不仅仅是慢的问题,而且会严重影响css3动画!没错,这绝对是真的,我做的单页应用,用click事件执行的,点击后css3切换动画,经常会出现动画被省略掉直接到最后一个keyframe,之前一直怀疑是click有问题,在我用自己封装的tap事件替代click之后,css3动画立即变得无比的流畅,再没出现过掉帧现象。

    补充:android手机上click事件没有延迟现象,能够立即触发 

    tap事件原生是没有的,如果不想封装的话可以用touchend事件代替,当然这样做的话滑动的时候也会可能触发得到,最好还是封装一下,或用iscroll,zepto之类的库,我的另一篇文章也有一个完整的封装tap和swipe手势的组件代码。

    传送门:通过html5 touch事件封装手势识别组件

    测试代码(注:使用iphone手机来测试ios7~ios9,在android下我的测试机型没遇到这个问题)

    var start,end;
     
    $(document.body).append($("<a href='javascript:' id='btn_test'>test</a>")); $(
    "#btn_test").bind("touchend",function(){ start=new Date(); }) $("#btn_test").bind("click",function(){ end=new Date(); alert(end-start); })
  • 相关阅读:
    9.堆排序
    8.全排列
    37.微信跳一跳辅助开发(C语言+EasyX)
    7.图形化实现快速排序法
    codeforces 632A A. Grandma Laura and Apples(暴力)
    codeforces 633D D. Fibonacci-ish(dfs+暴力+map)
    codeforces 633B B. A Trivial Problem(数论)
    codeforces 633A A. Ebony and Ivory(暴力)
    codeforces 622B B. The Time
    codeforces 622D D. Optimal Number Permutation(找规律)
  • 原文地址:https://www.cnblogs.com/windyfancy/p/5174276.html
Copyright © 2020-2023  润新知