fastclick的介绍和使用

2024-04-25 09:42:04

移动端点击延迟事件

1. 移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟

2. 原因: 移动端的双击会缩放导致click判断延迟

解决方式

1. 禁用缩放

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

缺点: 网页无法缩放

2. 更改默认视口宽度

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

缺点: 需要浏览器的支持

3. css touch-action

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

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

4. tap事件

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

缺点: 点击穿透

5. fastclick

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

缺点: 脚本相对较大

使用:

```JS

// 引入

<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中使用

```js

// 安装

npm install fastclick -S

// 引入

import FastClick from 'fastclick'

// 使用

FastClick.attach(document.body);

```

转载于:https://www.cnblogs.com/cangqinglang/p/9948880.html

fastclick的介绍和使用相关推荐

Unsafe应用详解
本文章来源于:https://github.com/Zeb-D/my-review ,请star 强力支持,你的支持,就是我的动力. [TOC] 背景平时在啃并发库会发现一些底层的影子,虽然J.U. ...
fastclick库的介绍和使用
移动端点击延迟事件 1. 移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟 2. 原因: 移动端的双击会缩放导致click判断延迟 fastclick 是具有消除移动端浏览器上的点击事 ...
egg html模板,egg+vue服务端渲染模板项目介绍
egg-vue-webpack-boilerplate 基于 Egg + Vue + Webpack SSR 服务端渲染和 CSR 前端渲染工程骨架项目,包括前台系统(SSR MPA)和后台管理系统( ...
周末读fastclick.js源码有感
看之前需要知道: // 创建一个事件对象,就好像你绑定事件回调函数里获得的那个事件对象一样 var myEvent = document.createEvent('Event')// 初始化这个事件对 ...
fastclick 解决移动端click事件延迟300ms和点击穿透问题
一.移动端click点击事件300ms延迟介绍在正常情况下,如果不进行特殊处理,移动端在触发点击事件时,会有300ms的延迟.换句话说,当我们在点击移动端页面后不会立即做出反应,而是会等待300ms ...
简单介绍互联网领域选择与营销方法
在我看来,互联网领域的选择是"安家",而营销方法的不同则表现了"定家"的方式多种多样,只有选对了,"家"才得以"安定". ...
常用开源协议介绍以及开源软件规范列表
1. 开源协议介绍 GPL: General Public License,开源项目最常用的许可证,衍生代码的分发需开源并且也要遵守此协议.该协议也有很多变种,不同变种要求会略微不同. MPL: MP ...
python：Json模块dumps、loads、dump、load介绍
20210831 https://www.cnblogs.com/bigtreei/p/10466518.html json dump dumps 区别 python:Json模块dumps.load ...
pytorch学习笔记（九）：PyTorch结构介绍
PyTorch结构介绍对PyTorch架构的粗浅理解,不能保证完全正确,但是希望可以从更高层次上对PyTorch上有个整体把握.水平有限,如有错误,欢迎指错,谢谢! 几个重要的类型和数值相关的 T ...

最新文章

热门文章