在vue中用fastClick解决移动端点击事件300ms延迟

最新推荐文章于 2023-01-06 15:35:44 发布
最新推荐文章于 2023-01-06 15:35:44 发布
阅读量190 收藏 1
点赞数
文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huyuehuyuehu/article/details/106549605
版权

原理:

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

安装

yarn fastclick

引入

import FastClick from 'fastclick'

使用

FastClick.attach(document.body)
huyuehuyuehu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用vue框架写的去哪儿网移动端的前端学习心得
lyc2786161648的博客
12-23 364
最近在学习慕客网上的去哪网实战，才发现移动端还有自己不知道的一些细节。 1.移动端上面meta标签的设置 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale
vue移动端去哪儿旅游网
qq_42857403的博客
04-14 411
##vue移动端去哪儿旅游网 说明： 1、该项目是对移动端去哪儿网的仿写，实现了从首页、城市选择、详情页面，是一个前后端分离的开源目，实现了前端内容的编写。 2、主要技术栈：Vue+Vue-router+Vuex++Axios+stylus+fastclick+swiper+BetterScroll Gitee地址：https://gitee.com/hoona/travel-self 演示视频地址：https://v.qq.com/x/page/h323971xslk.html 页面： 首页页面、城市选择
Vue移动端开发解决300ms点击延迟—FastClick
01-20
一.FastClick 移动端设备浏览器会默认在用户点击屏幕大约延迟300ms后才会触发点击事件，这是为了检查用户是否执行的是双击事件。为了能够立即响应用户的点击事件，才有了FastClick。 二.用法 全局安装fastclick： npm i fastclick 也可使用淘宝镜像： cnpm i fastclick 三.Vue中引入及配置FastClick 引入： import FastClick from 'fastclick' 配置： if ('addEventListener' in document) { document.addEventListener('DOMCo
vue 移动端 fastClick
Future1994的博客
04-15 489
vue项目引用fastclick npm指令 1 npm install fastclick -D 或者 cnpm install fastclick -D 然后在main.js写上 1 2 3 4 5 6 7 8 importFastClick from'fa...
fastclick插件的使用--移动端vue项目开发(vue常用插件)
weixin_44928447的博客
12-20 355
fastclick插件 可以解决移动端300ms延迟,让点击更流畅 1.安装 npm install --save fastclick@1.0.6 2.main.js导入并注册 import FastClick from "fastclick" //解决移动端300ms延迟 FastClick.attach(document.body)
Vue —— 移动端添加 fastclick
weixin_30615767的博客
11-22 130
fastclick：处理移动端click事件300毫秒延迟。 npm install fastclick -S main.js 中引入，并绑定到body import FastClick from 'fastclick' FastClick.attach(document.body); 转载于:https://www.cnblogs.com/cnloop/p/9998821.html...
vue 移动端点击延迟_vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法
weixin_35882650的博客
02-22 237
一，在正常情况下，如果不进行特殊处理，移动端在触发点击事件时，会有300ms的延迟。换句话说，当我们在点击移动端页面后不会立即做出反应，而是会等待300ms才会触发click事件。在移动web兴起初期，用户对300ms的延迟没有太大的感觉，但随着用户对交互体验的要求的提高，如今，移动端的300ms延迟严重影响了用户体验。方案一 禁用缩放在html文档头部的meta标签中加入如下语句：user-sc...
一个vue项目总结
qq_33024515的博客
03-21 1139
开始 这是我在工作中开发的一个微信端的h5项目，主要功能是一个答题以及一个调用微信扫描查看一些机器设备信息，功能不多，但麻雀虽小，五脏俱全，vue中常用的技术栈都有涉及到。这篇文章主要是对此项目的一个总结以及对整个项目的开发流程做一个梳理。 技术栈 这个项目我是使用vue技术栈进行开发，之前我大部分的工作是开发微信小程序，vue虽然也用过，不过项目经验还是偏少，也就是写了一些demo，所以这...
vue项目经验
FGstudy的博客
11-23 1313
vue商城项目记录 github上有个常用的css初始化样式，可以用npm命令安装npm install --save normalize.css，也可以直接在src/css下新建一个css文件，将normalize的代码复制进去 用脚手架3搭建的项目里，如果要配置路径别名需要自己新建一个vue.config.js文件，放在项目的根目录下 如果只是文字不一样的时候，就没有必要用插槽 为了方便以后...
vue-app项目知识点总结（二）
青椒的博客
05-23 1409
一. FeatureView 独立组件封装FeatureView div>a>img 二. TabControl 独立组件的封装 props -> titles div>根据titles v-for遍历 div -> span{{title}} css相关 选中哪一个tab, 哪一个tab的文字颜色变色, 下面border-bottom current...
纯TS引入fastclick
weixin_40998880的博客
02-28 729
背景： 移动端解决300s延迟问题 环境：TS 4.5.5 + webpack 5.69.1 方案： 1. 使用ts版fastclick， @types/fastclick 2. 使用原生fastclick.js 实现： 方案一： 1. yarn add '@types/fastclick' 2. 修改@types -> fastclick -> index.d.ts文件的代码 declare module "fastclick" { // function fastclic
fastclick-解决移动端300ms延迟以及图片懒加载
qq_52135740的博客
07-23 166
fastclick-解决移动端300ms延迟 第一步安装fastclick yarn add fastclick 第二步使用 图片懒加载 什么叫懒加载 通俗讲 : 懒加载就是延时加载，即当需要用到的时候再去加载。 懒加载原理是什么 先将 img 标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再 img 标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。 第一步安装 yarn add vue
yarn安装
最新发布
qq_45142260的博客
01-06 7429
Yarn是facebook发布的一款取代npm的包管理工具。
vue移动端项目-click事件在浏览器中延迟300ms的解决方法
pinbolei的博客
09-03 797
在H5页面移动端项目当中，click事件在浏览器中会有300ms的延迟，这个也是移动端开发中常见的问题之一，今天就这个问题说一说解决方法 解决click点击事件300ms延迟 在vue项目中，可以通过引入fastclick第三方依赖包来解决。 1、安装fastclick依赖 npm install fastclick ---save 2、在main.js中引入并使用 import fastCli...
vue项目里面解决移动端点击事件300ms延迟问题
qq_42972187的博客
06-18 2206
1、vue项目搭建好后，下载第三方库 cnpm install fastclick --save ;保存依赖包； 2、在main.js里面引入 使用 import fastclick from"fastclick"; 3、fastclick.attach(document.body) 简单好用！！！ ...
移动端点击事件延迟300ms解决方式
qq_36742720的博客
10-28 988
说明：移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。  以下是历史原因，来源一个公司内一个同事的分享： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑...
vue项目使用fastclick引发的问题
qq_42672798的博客
12-10 836
1.ios点击不灵敏 vardeviceIsWindowsPhone=navigator.userAgent.indexOf('WindowsPhone')>=0 vardeviceIsIOS=/iP(ad|hone|od)/.test(navigator.userAgent)&&!deviceIsWindowsPhone console.log(deviceIsIOS) fastClick.prototype.focus=function(targ...
H5开发：fastclick取代tap
Generon的博客
09-26 1027
html>html lang="zh-CN">head> meta charset="UTF-8"> title>fastclick说明书title> meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> script
移动端click事件延迟300ms的原因以及解决办法
weixin_34377919的博客
05-22 155
这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。这当中最出名的，当属双击缩放(double tap to zoom)。这也是会有上述 300 毫秒延迟的主要原因。 当用户一次点击屏幕之后，浏览器并不能立刻判断用户是要进行双击缩放，还是想要...
Vue.js集成FastClick：解决移动端300ms延迟
FastClick是一个轻量级的JavaScript库，主要解决移动端浏览器中存在的点击事件300毫秒延迟问题，这通常发生在用户触碰屏幕后手指还在继续移动，浏览器会等待一段时间确认是否为真正的点击动作。 首先，FastClick...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值