zoukankan      html  css  js  c++  java
  • 移动端触屏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); })
  • 相关阅读:
    215. Kth Largest Element in an Array
    214. Shortest Palindrome
    213. House Robber II
    212. Word Search II
    210 Course ScheduleII
    209. Minimum Size Subarray Sum
    208. Implement Trie (Prefix Tree)
    207. Course Schedule
    206. Reverse Linked List
    sql 开发经验
  • 原文地址:https://www.cnblogs.com/windyfancy/p/5174276.html
Copyright © 2011-2022 走看看