fastclick库的介绍和使用

移动端点击延迟事件 

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

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

fastclick 是具有消除移动端浏览器上的点击事件的 300ms 的延迟的作用。

注意几点

1、PC端无效

2、Android 上的 Chrome 32+ 浏览器,如果在 viewport meta tag 中添加了 width=device-width,那么就不会有 300ms 的延迟,所以,FastClick 监听器就不会被附加。

3、如果在 viewport meta tag 添加了 user-scalable=no,也不会有延迟。


解决方式

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事件阻止掉

    缺点: 脚本相对较大

    使用:

    // 引入<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);

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247390.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

toString()和String.valueOf()的区别(转)

惯例广告一发&#xff0c;对于初学真&#xff0c;真的很有用www.java1234.com&#xff0c;去试试吧&#xff01; 有的朋友在用这两个的时候感觉差不多 其实&#xff0c;很多时候效果是差不多的 但是&#xff0c;有的时候用.toString()会报错&#xff0c;而用String.valueOf()就…

kylin框架中使用postcss-px2rem

1.kylin框架的使用不做介绍 2.页面中 html模板页面中已经使用clientWidth/375*100px,已经赋值了html的fontsize随页面宽度而变化。 比如宽度375的屏 html的fontsize为100px kylin加载postcss-px2rem cnpm i --save-dev postcss-px2rem 在根目录下的plugin.js中 var px2rem…

VS2005无法启动解决方法(转)

一直有一个问题困扰&#xff0c;VS2005用得好好滴&#xff0c;突然有一天开始就进不去了&#xff0c;启动了以后&#xff0c;没有任何界面的出现&#xff0c;但是打开任务管理器&#xff0c;却能够看到进程的存在&#xff0c;真是奇怪了&#xff0c;我试图卸载并且重新安装&…

kylinH5框架之项目组件理解

目录 组件介绍 组件声明结构 组件接口 script dependency template style 状态注入 接口声明 组件介绍 Component 扩充自 Vue 的组件, 提供了 Vue 组件对等的输入参数能力。在代码书写时提供类 class 的装饰器 Decorator 风格。 import { Component, Watch } from al…

Markdown 语法简介

这是标题一 标题二 标题三 print(hello) 这是一个python 第一点 thiw dhaishd 第二点 转载于:https://www.cnblogs.com/BlogOfEr/p/11229682.html

kylinH5框架之项目开发调试

进行开发调试&#xff0c;需要完成以下步骤&#xff1a; 安装依赖开发调试构建生产 点击 代码示例&#xff0c;获取 Kylin Demo&#xff0c;并完成以下操作。 安装依赖 进入项目根目录&#xff0c;使用 cnpm 安装 npm 依赖&#xff1a; # 安装npm依赖 cnpm install 开发调试…

Java生鲜电商平台-深入订单拆单架构与实战

Java生鲜电商平台-深入订单拆单架构与实战 Java生鲜电商中在做拆单的需求&#xff0c;细思极恐&#xff0c;思考越深入&#xff0c;就会发现里面涉及的东西越来越多&#xff0c;要想做好订单拆单的功能&#xff0c;还是相当有难度&#xff0c; 因此总结了一下拆单功能细节&…

python3中Requests将verify设置为False后,取消警告的方式

import requests resp requests.get(https://www.***.com, verifyFalse)调用成功但是会有如下警告信息&#xff1a; InsecureRequestWarning: Unverified HTTPS request is being made. Adding certificate verification is strongly advised. See: https://urllib3.readthedo…

kylinH5框架之项目脚手架

页面介绍 Page 是一个 Webview 的逻辑抽象层&#xff0c;同时也是组件挂载的根节点。 代码引入 import { Page } from ali/kylin-framework; 页面声明结构 一个Page包含的接口在页面接口中声明&#xff0c;提供了对 Vue 实例的完整控制能力&#xff0c;简易的 Page 使用如…

博弈论学习笔记

决定近段时间复习一下博弈论顺便写点笔记。 大佬博客&#xff1a;几种常见博弈模型https://blog.csdn.net/wr132/article/details/51213331 SG函数与SG定理https://www.cnblogs.com/ECJTUACM-873284962/p/6921829.html 无敌的博弈总结https://blog.csdn.net/acm_cxlove/article…

Promise链式调用和解决回调地狱的ES7终极解决方法async,await

promise链式调用 **then 是成功回调&#xff0c;只要在then后边return一个promise就可以继续then**<script type"text/javascript">let p1new Promise(function(resolve,reject){setTimeout(function(){resolve()//成功回调// reject()//失败回调},2000)//2秒…

1.MySQL目录结构

分为两个目录&#xff1a; 1.安装目录&#xff1a; 2.数据目录&#xff1a; 在Linux下 yum安装mysql后使用 find / -name my.cnf 找到mysql数据文件的位置 转载于:https://www.cnblogs.com/sdrbg/p/11237231.html

对promise.all底层的实现的研究

1.Promise.all(iterable)返回一个新的Promise实例,此实例在iterable参数内素有的Promise都fulfilled或者参数中不包含Promise时&#xff0c;状态变成fulfilled。 如果参数中Promise有一个失败rejected &#xff0c;此实例回调失败&#xff0c;失败原因的是第一个失败Promise的返…

vue-provide/inject轻松实现跨级访问祖先组件

provide&#xff1a;Object | () > Object inject&#xff1a;Array<string> | { [key: string]: string | Symbol | Object } provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。 这对选项需要一起使用&#x…

python 操作redis,存取为字节格式,避免转码加

这种情况连接数据库&#xff0c;对数据的存取都是字节类型&#xff0c;存取时还得转码一下 from redis import Redis# 实例化redis对象rdb Redis(hostlocalhost, port6379, db0,passwordaaa123) rdb.set(name, root) name rdb.get(name) print(name)为了避免上述情况&#x…

element ui table scrollTop 滚动到行头或行尾

1.设置table的ref为tableList2.设置滚动至顶部this.$refs.tableList.bodyWrapper.scrollTop 0;3.设置滚动至底部this.$refs.tableList.bodyWrapper.scrollTop this.$refs.tableList.bodyWrapper.scrollHeight;//如果请求完更新数据&#xff0c;需要使用$nextTick this.$nextTic…

Element-UI中Drawer抽屉去除标题自带蓝色框

当点击事件drawertrue时&#xff0c;抽匣回打开 这时抽匣的标题会出现一个难看的蓝色边框&#xff0c;一会就会消失&#xff0c;但是好丑&#xff0c;所以要去掉它 解决方法 /deep/ :focus {outline: 0;} vue组件中&#xff0c;在style设置为scoped的时候&#xff0c;里面在…

Java生鲜电商平台-B2B生鲜的互联网思维

Java生鲜电商平台-B2B生鲜的互联网思维 在互联网高速发展的今天&#xff0c;为我们的生活带来了众多便利。然而互联网从早期的萌芽状态到现在妇孺皆知&#xff0c;它的崛起速度远远超乎世人的想象。人们开始关注互联网并且研究它&#xff0c;而思维模式的研究则是从深层次研究事…

Java生鲜电商平台-高并发核心技术订单与库存实战

Java生鲜电商平台-高并发核心技术订单与库存实战 一、 问题 一件商品只有100个库存&#xff0c;现在有1000或者更多的用户来购买&#xff0c;每个用户计划同时购买1个到几个不等商品。 如何保证库存在高并发的场景下是安全的&#xff1f; &#xff08;1&#xff09;不多发 &…

Vue2 MVVM 双向绑定(数据劫持+发布者-订阅者模式)

参考文献&#xff1a;https://www.cnblogs.com/libin-1/p/6893712.html https://juejin.im/post/5b2f0769e51d45589f46949e MVVM拆开来即为Model-View-ViewModel&#xff0c;有View&#xff0c;ViewModel&#xff0c;Model三部分组成。View层代表的是视图、模版&#xff0c;负…