移动端解决点击300ms延迟问题

news/2024/7/10 0:34:04 标签: 移动端, vue, web

在页面中加上如下代码: 

    <!-- 下面这段Js是为了解决移动端点击300ms延迟问题 -->
    <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
    <script>
      if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
          FastClick.attach(document.body);
        }, false);
      }
      if(!window.Promise) {
        document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
      }
    </script>

这样就能够有效的解决了~

 

移动端的 click 有300 ms的延时原因:


移动端触发时间会按照 touchstart,touchmove,touchend,click 顺序触发;触发touchend,click之间会有200-400不等的时间延时(因为移动端需要判断用户是不是想要进行双击);
fastclick 和 zepto 的tap 事件 都可以解决 300 ms延时;
fastclick 原理:是在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后的click事件阻止掉。
tap 原理:在touchstart 时会记录一个值x1,y1,在touchend时会记录x2,y2,通过对比着几个值,判断用户是否是点击事件,而不是滑动事件,然后直接触发事件;
注意:fastclick 在ios 上会影响元素自动触发,比如 直接click();会拦截第一次,需要执行两次click();才会触发;安卓上不需要;


http://www.niftyadmin.cn/n/1466651.html

相关文章

vue项目proxyTable配置和部署服务器的问题

在localhost环境下跑项目时&#xff0c;接口地址是 http://xxxx.com/save/index 这样的接口地址&#xff0c;我们这样直接使用会存在跨域的请求&#xff0c;导致接口请求不成功&#xff0c;我们进入 config/index.js 代码下如下配置即可。 dev: {// 静态资源文件夹assetsSubDi…

vue 生命周期 详解

先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期&#xff0c;也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程&#xff0c;我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程&#xff0c;就是生命周期。 …

stylus的基本用法

1.语法 Stylus的语法花样多一些&#xff0c;它使用“.styl”的扩展名&#xff0c;Stylus也接受标准的CSS语法&#xff0c;但是他也接受不带花括号和分号的语法&#xff0c;如下所示&#xff1a; /* style.styl */ h1 {color: #0982C1; } /* 省略花括号 */ h1color: #0982C1; …

es7中Async/await学习

Async/await 有一种特殊的语法可以更舒适地与promise协同工作&#xff0c;它叫做async/await&#xff0c;它是非常的容易理解和使用。 Async functions 让我们先从async关键字说起&#xff0c;它被放置在一个函数前面。就像下面这样&#xff1a; async function f() {retur…

解决 linux 下安装 node 报: command not found

注意&#xff1a;有时安装成功后,需要关闭xshell&#xff0c;重新启动。nvm才会生效。 首先是在linux下安装node的问题&#xff1a; 查了很多人安装方法&#xff0c;也试过了&#xff0c;就是下载完node的压缩包&#xff0c;在linux服务器下解压&#xff0c;进入到bin目录就可…

Linux中命令行终端切换工具screen

Screen是一款由GNU计划开发的用于命令行终端切换的自由软件。用户可以通过该软件同时连接多个本地或远程的命令行会话&#xff0c;并在其间自由切换。GNU Screen可以看作是窗口管理器的命令行界面版本。它提供了统一的管理多个会话的界面和相应的功能。 会话恢复 只要Screen本…

linux下Nginx的启动、停止与重启

启动 启动代码格式&#xff1a;nginx安装目录地址 -c nginx配置文件地址 例如&#xff1a; [rootLinuxServer sbin]# /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 停止 nginx的停止有三种方式&#xff1a; 从容停止 1、查看进程号 [rootLinuxServer …

nginx服务器的根目录在哪

今天第一次安装好Nginx服务器之后&#xff0c;一时找不到Nginx服务器存放网页的根目录在哪里&#xff0c;于是上网查了查&#xff0c;总结一下。 第一次安装的Nginx的默认根目录查找方法&#xff1a;首先到/usr/local/nginx/conf目录下找到nginx.conf文件&#xff0c;如图 打开…