移动端的点击事件的有延迟，为什么会有？_Web前端

4条回答

2楼 · 2020-09-14 17:06

因为浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。

3楼 · 2020-09-14 17:25

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

//解决方案： fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块，tap事件也是为了解决在click的延迟问题

一、tap.js解决方案

[html] view plain copy

<script src="tap.js">script>
<div id="container">
<button id="button-1">Click eventbutton>
<button id="button-2">Tap eventbutton>
div>
<div id="output">div>
<script>
var container = document.getElementById('container')
var button1 = document.getElementById('button-1');
var button2 = document.getElementById('button-2');
var output = document.getElementById('output');
var tap = new Tap(container);
button1.addEventListener('click', callback, false);
button2.addEventListener('tap', callback, false);
function callback (e) {
e.preventDefault();
var p = document.createElement('p');
p.textContent = 'event: ' + e.type;
output.insertBefore(p, output.firstChild);
}
script>

二、fastclick.js解决方法

[html] view plain copy

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title>
<style>
*
{
margin: 0;
}
body
{
}
.button
{
background-color: #3d3d3d;
border: 0px;
height: 80px;
width: 80%;
font-size: 50px;
margin: 10% 0% 0% 10%;
color: #fff;
}
.fu
{
min-height: 100%;
min-width: 100%;
background-color: Black;
background: rgba(0,0,0,0.4);
position: absolute;
top: 0;
text-align: center;
display: none;
}
.ts
{
margin: 8% auto;
width: 400px;
height: 400px;
top: 59%;
background-color: #fff;
text-align: center;
}
style>
<script src="fastclick.js" type="text/javascript">script>
<script src="jquery-1.7.2.js" type="text/javascript">script>
<script type="application/javascript">
window.addEventListener('load', function () {
FastClick.attach(document.body);
}, false);
function xian() {
$(".fu").show().hide(350);
}
script>
head>
<body>
<div>
<div class="but">
<input class="button" type="button" value="点击我" onclick="xian()" />div>
<div class="fu" >
<div class="ts">
我是浮层
div>
div>
div>
body>
html>

kitidog2016

4楼 · 2020-09-14 18:27

大多数基于触摸的浏览器设备，在点击时都会有个 300ms 的事件触发等待时间，做过 web app 开发的同学应该都遇到过这个情况，通过下面的5步可以轻松搞定这个延迟。

1、不要太纠结于此
是否能接受这 300ms 的时间延迟，往往取决于你的应用和目标受众，比如：如果是个内容为主，并且菜单较少的应用，那么用户在阅读上花费的事件远远大于在菜单上消耗的事件，这种情况下 300ms 是完全可以接受的，并且没有 300ms 延迟的体验并不会好很多。分析你的应用判断是否需要解决这个不是问题的问题，在做正确抉择。

2、禁用缩放（chrome 和 firefox）

在 chrome 和 firefox 的移动版本中，如果禁用了页面缩放，那么着 300ms 的延迟就会自动消失，具体代码如下：

或

但是这一方案在 safari 上并不起作用，还会降低有视觉或运动障碍用户的可访问性。

3、设置 viewport 的 device-width （chrome 32+）
在 chrome 32+ 中，如果设置了 viewport 的宽度小于或等于物理设备的宽度，那么也会达到禁用缩放的效果。

注意：这里的最大缩放比与上面meta中的值并不一致，这个是关键点。

4、使用指针事件（IE10+）

微软已经针对触摸问题发布了具体的规范，例如：在你滚屏的时候 pointerup 事件并不会被触发。

这儿有一个非标准的 CSS 触摸 action 属性，它允许你移除特定元素或整个文档的触发延迟，而无需禁用缩放：

a, button, .myelements {-ms-touch-action: manipulation; /* IE10  */touch-action: manipulation;     /* IE11+ */}

5、使用fastclick.js

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到touchend事件的时候，会通过 DOM 自定义事件立即触发一个模拟click事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。使用方法如下。

  第一步：在页面中引入fastclick.js文件。
  第二步：在js文件中添加以下代码
  在 window load 事件之后，在body上调用FastClick.attach()即可。

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

如果你项目使用了JQuery，就将上面的代码改写成：

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

6、使用 touchend 事件处理

不同于 click 和 touchstart,touchend 没有这个 300ms 的延迟,而是即时触发,你完全可以在 WebGL 或 canvase 游戏中进行实践,但是在web 页面中单单使用 touchend 并不一定靠谱.

1、如果用户在两个不同元素之间触发了 touchstart 和touchend，那么 click 不会被触发 .

2、如果用户触发了 touchstart,但是在touchend之前是一个长长的 touchmove 滚动, 那么 click 也不会被触发.

3、在站点上任然应该保留 click 事件以兼容那些非触摸设备,这是你就要考虑事件的重复触发问题.

在此处输入内容已有同行为我们封装了部分解决方法：

1、FastClick 来至于FT实验室的一个插件，仅仅只有10kb，但是能解决上面的2-4步.

2、Tappy 来自于Filament Group，仅仅1kb，概念上类似于上面的指针事件.

问题：当你为多个元素进行这些事件绑定时，有可能出现性能的损耗.

是否有完美的解决方案呢？

是否需要解决 300ms 在于自己的判断，300ms被设计出来是有特定的用途，上面的meta属性中进行了设定，在chrome和firefox下能起作用，希望其他厂商也能尽快提供这类支持。touch-action: manipulation 这个css属性能把风险降到最低，虽然现在只有微软支持，但是作为W3C规范和HTML5test的一部分，因此也许我们并不需要等待太久。

cc收获啦

5楼 · 2020-09-15 09:19

这与双击缩放的方案有关。平时我们有可能已经注意到了，双击缩放，即用手指在屏幕上快速点击两次，可以看到内容或者图片放大，再次双击，浏览器会将网页缩放至原始比例。

浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。

移动端的点击事件的有延迟，为什么会有？

相关问题推荐

等你来答

热门问答

相关文章

移动端的点击事件的有延迟，为什么会有？

相关问题推荐

等你来答

热门问答

相关文章

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间