方法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, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> -->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <title>2.3 click 300ms延迟</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .box {

            width: 300px;

            height: 300px;

            background-color: red;

            margin: 0 auto;

        }

    </style>

    <script src="js/fastclick.js"></script>

    <script>

        if ('addEventListener' in document) {

            document.addEventListener('DOMContentLoaded', function() {

                FastClick.attach(document.body);

            }, false);

        }

    </script>

</head>

<body>

    <!-- 原因

        double click 双击

    解决办法

        fastclick -->

    <div id="box" class="box"></div>

    <script src="http://192.168.1.5:1337/vorlon.js"></script>

    <script>

        var boxEl = document.getElementById('box');

        var startTime = 0;

        boxEl.addEventListener('touchstart', function () {

            startTime = Date.now();

            console.log('touchstart');

        }, false);

        boxEl.addEventListener('click', function () {

            console.log('click');

            console.log(Date.now() - startTime);

        }, false);

    </script>

</body>

</html>

解决移动端click事件300ms延迟的问题的更多相关文章

  1. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

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

    下载地址:https://github.com/ftlabs/fastclick 1.click事件为什么有延迟? “...mobile browsers will wait approximatel ...

  3. 解决触摸屏设备click事件300ms的延迟的问题

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

  4. 移动端click事件延迟300ms到底是怎么回事，该如何解决？

    不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...

  5. fastclick：处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...

  6. vue.js 添加 fastclick的支持 处理移动端click事件300毫秒延迟

    fastclick:处理移动端click事件300毫秒延迟. 1,先执行安装fastclick的命令 npm install fastclick 2,在main.js中引入,并绑定到body. imp ...

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

    移动端点击事件300ms延迟的问题由来已久,如下截图 下面截图来自原文:https://www.jianshu.com/p/6e2b68a93c88 网上关于300ms延迟问题的解决方法,大致分为 3 ...

  8. h5开发app,移动端 click 事件响应缓慢的解决方案

    造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...

  9. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

随机推荐

  1. 【剑指offer】27. 二叉树的镜像

    剑指 Offer 27. 二叉树的镜像 知识点:二叉树:递归:栈 题目描述 请完成一个函数,输入一个二叉树,该函数输出它的镜像. 示例 输入:root = [4,2,7,1,3,6,9] 输出:[4, ...

  2. 【Uva1025 A Spy in the Metro】动态规划

    题目描述 某城市地铁是线性的,有n(2≤n≤50)个车站,从左到右编号1~n.有M1辆列车从第1站开始往右开,还有M2辆列车从第n站开始往左开.列车在相邻站台间所需的运行时间是固定的,因为所有列车的运 ...

  3. 第七篇 -- 常用界面组件的使用（QSlider和QProgressBar）

    首先画个图 ui_proBar.py # -*- coding: utf-8 -*- # Form implementation generated from reading ui file 'ui_ ...

  4. Docker隔离技术

    前言 Docker系列文章: 此篇是Docker系列的第九篇,之前的文章里面或多或少的提到Docker的隔离技术,但是没有很清楚的去聊这个技术,但是经过这么多文章大家一定对Docker使用和概念有了一 ...

  5. Java面向对象04——构造器

    类中的构造器也成为构造方法,是在进行创建对象的时候必须调用的.并且构造器有以下两个特点: 必须和类的名字相同 必须没有返回值,也不能写void  package oop.demon01.demon02 ...

  6. Solidity

    起因是Xenc师傅给我截了张图,我日 居然看不懂 ,一搜才知道,之前学的版本有些老了.. 这次学下新一点的记录下 HelloWorld pragma solidity ^0.6.0; // versi ...

  7. Blazor 模板化组件开发指南

    翻译自 Waqas Anwar 2021年4月15日的文章 <A Developer's Guide To Blazor Templated Components> [1] 在我之前的一篇 ...

  8. 使用PageFactory类封装页面元素,并实现简单的登录

    1.新建页面对象类LoginPage import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; impo ...

  9. java JNI介绍

    java JNI介绍 目录 java JNI介绍 1. Java调用C++代码 2.C++代码调用java代码 JNI是Java Native Interface的全称. oracle文档中是这样描述 ...

  10. Python小白的数学建模课-19.网络流优化问题

    流在生活中十分常见,例如交通系统中的人流.车流.物流,供水管网中的水流,金融系统中的现金流,网络中的信息流.网络流优化问题是基本的网络优化问题,应用非常广泛. 网络流优化问题最重要的指标是边的成本和容 ...