vue 移动端Fastclick使用

最新推荐文章于 2024-06-25 01:12:18 发布

weixin_44428199

最新推荐文章于 2024-06-25 01:12:18 发布

阅读量877

点赞数 1

CC 4.0 BY-SA版权

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_44428199/article/details/120937652

移动端浏览器存在300ms点击延迟，为实现即时响应，本文介绍了Fastclick库的工作原理和使用方法。Fastclick通过在touchend事件后立即模拟click事件并阻止后续的延迟click，从而消除延迟。同时，文中列举了其他解决方案，如禁用缩放、设置viewport、使用touch-action和tap事件，但它们各有优缺点。在实际应用中，可以按需选择或结合使用这些技术来优化移动端的点击体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么要用fastclick

因为移动端浏览器点击事件有一个300ms的延迟，为了响应用户的双击行为，为了能够立即响应用户的点击事件，使用fastclick解决

解决方式

禁用缩放

<meta name = "viewport" content="user-scalable=no" >

缺点: 网页无法缩放
更改默认视口宽度

<meta name="viewport" content="width=device-width">

缺点: 需要浏览器的支持
css touch-action

touch-action的默为 auto，将其置为 none 即可移除目标元素的 300 毫秒延迟

缺点: 新属性，可能存在浏览器兼容问题
tap事件

zepto的tap事件, 利用touchstart和touchend来模拟click事件

缺点: 点击穿透

fastclick

原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉

缺点: 脚本相对较大

使用:


// 引入

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

// 使用了jquery的时候

$(function() {

    FastClick.attach(document.body);

});

// 没使用jquery的时候

if ('addEventListener' in document) {

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

        FastClick.attach(document.body);

    }, false);

}

在vue中使用


// 安装

npm install fastclick -S

// 引入

import FastClick from 'fastclick'

// 使用

FastClick.attach(document.body);