《H5 App开发》移动端IOS click 事件响应缓慢的解决方案

造成点击缓慢的原因

从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？因为它想看看你是不是要进行双击（double tap）操作。

第一种解决方案：

使用js框架fastclick, 处理移动端 click 事件 300 毫秒延迟，由 FT Labs 开发，Github 项目地址：https://github.com/ftlabs/fastclick

在页面直接引入fastclick.js

<script type='application/javascript' src='/path/to/fastclick.js'></script>

原生js使用方法：

window.addEventListener('load', function() {FastClick.attach(document.body);
}, false);

环境内有jquery的情况下，使用方法：

$(function() {FastClick.attach(document.body);
});

第二种解决方案：

第二种解决方案是将click事件替换为touchstart事件

$(document).on("touchstart",".farmGoods",function(){alert('111');});

这两个解决方案的差异：

1.第一种方案在ios上面还是会存在有点延迟的问题，但是能解决连续点击没反应的问题，上下滑动滚动条不会选中事件

2.第二种方案在ios上面不会存在延迟的问题，但是上下滑动滚动条会选中手指接触的第一个元素

ps:这里博主只是在ios App上面测试的这个问题，并未发现安卓系统会存在延迟、连选不中的问题；

推荐使用第一种解决方案

转载于:https://www.cnblogs.com/chensv/p/10063987.html

《H5 App开发》移动端IOS click 事件响应缓慢的解决方案相关推荐

最新仿映客直播APP开发实战项目IOS开发实战8天(最全最新)
最新仿映客直播APP开发实战项目IOS开发实战8天第 1 章:直播准备 1: [录播] 课程大纲介绍 09:56 2: [录播] 了解直播技术和腾讯云直播 09:54 3: [录播] 基础封装 23 ...
H5 App开发工具 WeX5
WeX5是H5 App开发工具,Apache开源,免费开放所有代码,所开发的应用均能"一秒打开"!对跨平台多前端应用开发的支持极好,一次开发,多平台运行 . WeX5采用混合应用( ...
移动端的click事件延迟触发的原理是什么？如何解决这个问题？
移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟会出现点透现象在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...
vue 移动端点击延迟_vue移动端项目-click事件在浏览器中延迟300ms的解决方法
在H5页面移动端项目当中,click事件在浏览器中会有300ms的延迟,这个也是移动端开发中常见的问题之一,今天就这个问题说一说解决方法解决click点击事件300ms延迟-fastClick fa ...
H5 App开发技术如何进行选型？
目前按照 APP 开发分类,分为以下三大类原生 APP [ Android Swift Flutter React Native ] WEB APP Hybrid App [混合APP ] ...
H5+app开发概述
HTML5 Plus应用概述 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实 ...
移动App开发（包含iOS和Android转型）
上一篇从框架的角度介绍了iOS开发,本来这一节是要讲autolayout的,但是由于刚开始,可能很多移动端开发的同学,有的学android的,有的是从事iOS的,根据公司业务的调整,可能会存在互相的转 ...
jQuery中click事件多次触发解决方案
jQuery 中元素的click事件中绑定其他元素的click事件. 因为jQuery中的click事件会累计绑定,导致事件注册越来越多. 解决方案: 1.能够避开,避免把click事件绑定到其他元素 ...
H5/APP客服端源码/uniapp在线客服系统源码开源了，全源码代码解读及发行安装教程...
前言目前,即时通讯在线咨询在网站.APP.小程序中已经是不可获取的功能,尤其是专注于线上营销的商家,迫切需要一套可以随时与访客交流的即时通讯工具. 如果使用市面上的SaaS客服系统,会在功能上受限制 ...

《H5 App开发》移动端IOS click 事件响应缓慢的解决方案

《H5 App开发》移动端IOS click 事件响应缓慢的解决方案相关推荐

最新文章

热门文章