移动端触屏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);})

转载于:https://www.cnblogs.com/windyfancy/p/5174276.html

移动端触屏click点击事件延迟问题，以及tap的解决方案相关推荐

移动端触屏网页的触摸事件
PC端网页从无到有发展至今,人们习惯了鼠标与键盘的人机交互模式,因此在PC端网页开发中一般使用鼠标事件和键盘事件. mouse事件: onclick事件:在单击鼠标左键或右键时发生. ondouble ...
Vue 之移动端 better-scroll 下 click 事件失效问题（PC端却正常click点击）
Vue 之移动端 better-scroll 下 click 事件失效问题(PC端却正常click点击) 目录 Vue 之移动端 better-scroll 下 click 事件失效问题(PC端却 ...
Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
JS 移动端触屏滑动
首页> 程序开发 > web前端 > JavaScript > 正文 JS案例之5--移动端触屏滑动 2014-08-15 0个评论收藏我要投稿移动端 ...
移动html触摸效果,JS实现移动端触屏拖拽功能
2.css 3.js = maxW) { oLeft = maxW; } if(oTop < 0) { oTop = 0; } else if(oTop >= maxH) { oTop = ...
uniapp 真机调试 click点击事件无效
问题分析: (网络上普遍答案,但不能确定是否是这个原因导致) 移动端的主要问题是click会有200-300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的3 ...
html 手机端拖拽效果,JS实现移动端触屏拖拽功能
1.html 2.css * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #div1 { width: 5 ...
fastclick.js解决移动端（ipad）点击事件反应慢问题
fastclick.js解决移动端(ipad)点击事件反应慢问题参考文章: (1)fastclick.js解决移动端(ipad)点击事件反应慢问题 (2)https://www.cnblogs.co ...
knockout click点击事件及事件源解释
绑定click点击事件示例 <body>you've clicked<span data-bind="text:number"></span>& ...

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

移动端触屏click点击事件延迟问题，以及tap的解决方案相关推荐

最新文章

热门文章