点击300ms 延迟问题讲解

2024-11-09

移动端click事件延迟300ms的原因以及解决办法[转载]

原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题.这当中最出名的,当属双击缩放(double tap to zoom).这也是会有上述 300 毫秒延迟的主要原因. 当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单

移动端点击300ms延迟

转载自:http://www.jianshu.com/p/6e2b68a93c88 一.移动端300ms点击延迟一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果.在移动WEB兴起的初期,用户对300ms的延迟感觉不明显.但是,随着用户对交互体验的要求越来越高,现今,移动端300ms的点击延迟逐渐变得明显而无法忍受. 那么,移动端300ms的点击延

移动端点击300ms延迟问题

移动端点击延迟事件 1. 移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟 2. 原因: 移动端的双击会缩放导致click判断延迟解决方式 1. 禁用缩放 `<meta name = "viewport" content="user-scalable=no" > ` 缺点: 网页无法缩放 2. 更改默认视口宽度 `<meta name="viewport" content="width=device-

【移动端】300ms延迟以及点透事件原因以及解决方案

产生原因移动端会有双击缩放的这个操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是这次操作是不是双击说完移动端点击300ms延迟的问题,还不得不提一下移动端点击穿透的问题.可能有人会想,既然click点击有300ms的延迟,那对于触摸屏,我们直接监听touchstart事件不就好了吗? 使用touchstart去代替click事件有两个不好的地方. 第一:touchstart是手指触摸屏幕就触发,有时候用户只是想滑动屏幕,却触发了touchstart事件,这不是

移动端300ms延迟解决的几种方法；

方案一:禁用缩放当HTML文档头部包含如下meta标签时: <meta name="viewport" content="user-scalable=no"> <meta name="viewport" content="initial-scale=1,maximum-scale=1"> 表明这个页面是不可缩放的,那双击缩放的功能就没有意义了,此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点

移动端300ms延迟问题和点击穿透问题

一.移动端300ms延迟问题: 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果.在移动WEB兴起的初期,用户对300ms的延迟感觉不明显.但是,随着用户对交互体验的要求越来越高,现今,移动端300ms的点击延迟逐渐变得明显而无法忍受. 那么,移动端300ms的点击延迟是怎么来的呢? 问题由来这要追溯至 2007 年初.苹果公司在发布首款 iPh

移动端点击事件300ms延迟问题解决方案——fastclick.js

移动端点击事件300ms延迟的问题由来已久,如下截图下面截图来自原文:https://www.jianshu.com/p/6e2b68a93c88 网上关于300ms延迟问题的解决方法,大致分为 3 种 ①:使用 meta viewport 属性禁用缩放,并让视口宽度等于设备宽度 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale

移动端的300ms延迟和点击穿透

移动端300ms延迟:假定这么一个场景.用户在浏览器里边点击了一个链接.由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作.因此,浏览器就等待 300 毫秒,以判断用户是否再次点击了屏幕.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果. 点击穿透:假如页面上有两个元素A和B.B元素在A元素之上.我们在B元素的touchstart事件上注册了一个回调函数,该回

fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms延迟:另外我们也知道zepto的touch模块,帮助我们实现了很多手机上的事件,比如tap等,tap事件也是为了解决在click的延迟问题.那么他们有什么区别呢? 先看zepto的touch模块实现: $(document) .on('touchstart ...',function(e){ ...

js解决苹果移动端300ms延迟的问题

做移动端页面开发的可能会了解到,ios系统click事件会有卡顿的现象,这个问题的根源是苹果本身自带的safari有双击放大页面的功能,再次双击会返回到原始尺寸,所以在第一次点击的系统会延迟300ms来判断是不是双击操作,为了解决这个问题,网上也给了解决的办法,把click事件绑定到ontouchstart事件上,这样就解决了300ms延迟的问题,这个文件是fastclick.js,在网上都能够搜的到 GitHub地址:https://github.com/ftlabs/fastclick

移动端web开发中对点透的处理，以及理解fastclick如何做到去除300ms延迟

一.点透问题以及处理办法开发中遇到一个问题,就是点击layer弹出框的取消按钮之后,按钮下方的click事件就直接触发了.直接看代码: $('.swiper-slide').on('click',function(){ window.location.href=url; }); timer_1=setTimeout(function(){ layer.open({ content:'我是一个弹框', btn:['下载','取消'], yes:function(){ window.locati

移动端click事件300ms延迟

移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果.在移动WEB兴起的初期,用户对300ms的延迟感觉不明显.但是,随着用户对交互体验的要求越来越高,现今,移动端300ms的点击延迟逐渐变得明显而无法忍受. 那么,移动端300ms的点击延迟是怎么来的呢? 产生原因移动浏览器上支持的双击缩放操作,以及IOS Sa

touch-action 解决移动端300ms延迟问题

CSS3 新属性, touch-action: manipulation; 可以有效的解决移动端300ms延迟的问题移动端300ms延迟问题一直都是h5APP的痛点, 有很多库或者方法都可以解决, 比如用onstouchstart和ontouchend已经 ontouchmove来实现点击, 这样代码会多写很多, 不如一个onclick来的直接, 也有用库来解决的, 比如zepto.js, 来书写点击事件, 但是就为了一个点击事件, 要引入一个库, 代价还是有点大的 CSS3为了解决这个难题,

移动端300ms延迟由来及解决方案

1.300ms延迟由来 300 毫秒延迟的主要原因是解决双击缩放(double tap to zoom).双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例. 那么这和 300 毫秒延迟有什么联系呢? 假定这么一个场景.用户在 iOS Safari 里边点击了一个链接.由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作.因此,iOS Safari 就等待

angularJS在移动端的点击事件延迟问题

在运用angular开发移动端的应用时,发现它并没有将ng-click做兼容,在移动端使用ng-click事件仍然会有300ms延迟.后来发现angular有一个专门针对移动端的模块:angular-touch.js,其中对ng-click做了兼容性处理,以下为该模块中部分内容: /** * @ngdoc method * @name $touchProvider#ngClickOverrideEnabled * * @param {boolean=} enabled update the ng

用Fastclick解决移动端300ms延迟问题

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击. 为了能够立即响应用户的点击事件,才有了FastClick. 用法: 引入fastclick.min.js,然后在脚本中加上: // 解决移动端点击事件300ms延迟 $(function() { FastClick.attach(document.body); }); fastclick.min.js代码如下: !function(){"use strict";function

解决移动端click事件300ms延迟的问题

方法1.部分浏览器的<meta>标签加上width=device-width就能解决. 方法2.引入fastclick.js库 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="width=device-width

处理移动端click事件300ms延迟的好方法—FastClick

下载地址:https://github.com/ftlabs/fastclick 1.click事件为什么有延迟? “...mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually p

移动端click事件出现300ms延迟

问题分析: 双击缩放是指手在屏幕上快速点击两次,iOS自带的Safari浏览器会将网页缩放至原始比例.当用户在屏幕上单击某元素时,浏览器会先捕获此处单击,但浏览器不知道用户是要单击链接还是要双击该部分区域进行缩放操作,所以浏览器捕获第1次单击后,会先持续一段时间t,如果在t时间段内用户未进行下一次点击,则浏览器会做单击跳转链接的处理:如果t时间段内用户进行了第2次单击操作,则浏览器会禁止跳转,转而对点击区域进行缩放操作.那么这个时间区间t是多少呢?在IOS safari下,大概为300ms. 解

解决移动端300ms延迟fastclick

为什么要使用fastclick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了fastclick. fastclick的使用 fastclick的使用非常简单 ①npm安装 npm install fastclick ②将fastclick依附到body上 // main.js import FastClick from 'fastclick' // 解决移动端300ms的延迟 FastClick.

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

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

点击300ms 延迟问题讲解

热门专题