fastclick

相关知识点 移动端、 适配（兼容）、 ios点击事件300ms延迟、 点击穿透、 定位失效...... 问题&解决方案 手机浏览器独有的三个事件？ onTouchmove，ontouchend，ontouchstart，ontouchcancel 为什么要用Zepto? jquery适用于PC端桌面环境，桌面环境更加复杂，jquery需要考虑的因素非常多，尤其表现在兼容性上面，相对于PC端，移动端的发杂都远不及PC端,手机上的带宽永远比不上pc端。pc端下载jquery到本地只需要1~3秒（90+K），但是移动端就慢了很多，2G网络下你会看到一大片空白网页在加载，相信用户第二次就没打开的欲望了。zepto解决了这个问题，只有不到10K的大小，2G网络环境下也毫无压力，表现不逊色于jquery。所以移动端开发首选框架，个人推荐zepto.js。 IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页

真的了解FastClick吗？: https://www.cnblogs.com/ylweb/p/10549040.html 你真的了解FastClick吗？ 前段时间在做公司官网手机端菜单部分的时候，遇到一些很诡异的点击问题。比如菜单点击无效/双击才有效、在手指滑动的时候会触发点击事件、以及同样的事件处理在微信跟浏览器会有不一样的表现等等，这些问题我一直试图用一些移动端事件的hack来解决，到最后还是有两个问题没有解决掉。后来意识到可能是引入的插件导致的事件冲突引起，因为一直都在全局引入了fastclick，以及最初偷懒引入的一个菜单功能插件（插件中有引入iScroll）。经过排查最后得出结论是fastclick与插件 冲突所致，只能去除插件重写菜单功能。而这个小插曲也让我有兴趣阅读一下它的源码来深究一下fastclick到底做了什么？ FastClick的使用场景及背景： 移动端的开发经常需要监听用户的双击行为，事件的发生顺序是这样的：touchstart---touchmove---touchend,然后大约过300ms触发click事件，用来判断是否有双击事件。 在混合使用touch与click时，会导致点击穿透！（此处不展开讨论） FastClick的思路就是 利用touch来模拟tap（触碰），如果认为是一次有效的tap，则在touchend时立即模拟一个click事件

fastclick的介绍和使用: https://www.jianshu.com/p/67bae6dfca90 移动端点击延迟事件 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=

vue-cli[2.x]中: 安装 npm install fastclick --save 使用： 在main.js中 ：先 import fastClick from 'fastclick' 然后 fastClick.attach(document.body) import Vue from 'vue' import App from './App' import router from './router' import fastClick from 'fastclick' import './assets/styles/reset.css' import './assets/styles/border.css' Vue.config.productionTip = false fastClick.attach(document.body) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) main.js 来源： https://www.cnblogs.com/ladybug7/p/12251273.html

vue 引入 fastclick插件后，有些a链接或者click事件需要点击两次，百度也搜不到，就只能看源码。。 找到node_modules 依赖包下面的fastclick—lib—fastclick.js文件 并找到 needsClick 方法 FastClick . prototype . needsClick = function ( target ) { 并在 switch 中写下判断条件 switch ( target . nodeName . toLowerCase ( ) ) { // Don't send a synthetic click to disabled inputs (issue #62) case 'button' : case 'select' : case 'textarea' : if ( target . disabled ) { return true ; } break ; case 'input' : // File inputs need real clicks on iOS 6 due to a browser bug (issue #68) if ( ( deviceIsIOS && target . type === 'file' ) || target . disabled ) { return true ; } break

1.5.1 什么是插件 移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我完成操作，那么什么是插件呢？ JS 插件 ：是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。 我们以前写的animate.js 也算一个最简单的插件 fastclick 插件解决 300ms 延迟。 GitHub官网地址： https:// github.com/ftlabs/fastclick 1.5.2 插件的使用 引入 js 插件文件。 按照规定语法使用。 fastclick 插件解决 300ms 延迟。 GitHub官网地址： https://github.com/ftlabs/fastclick if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } 1.5.3 Swiper 插件的使用 中文官网地址： https://www.swiper.com.cn/ 引入插件相关文件。 按照规定语法使用 1.5.4 其他移动端常见插件：lsuperslide

思路：安装sass预处理嵌套css，flex布局，flexible手机淘宝适配和fastclick移动300s延迟 打开cmd,使用命令行 1.切换盘符：e: 2.使用vue建立一个项目，具体请看我的随笔博客，vue安装错误详情这一篇 3.打开这个项目：cd my-project, 执行npm命令 4.安装sass预处理 a，全局安装 vue - cli 输入： npm install -- global vue - cli b , 创建一个基于 webpack 模板的新项目 输入： vue init webpack my - project c , 安装依赖 输入：npm install 为了使用sass，我们需要安装sass的依赖包 输入：npm install -- save - dev sass - loader //sass-loader依赖于node-sass 输入：npm install -- save - dev node - sass d , 在asset / css目录下，引入mixin . scss和style . scss文件 在main . js中引入， import axios from 'axios' import store from './store' import 'lib-flexible' import FastClick from

移动端点击延迟事件，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟，解决方式： 一、安装 npm install fastclick -S 二、用法 安装完以后，可以在在main.js中全局引入，并绑定到body，全局生效。或者在单页面引入，只针对当前页面生效 //引入 import FastClick from 'fastclick' //初始化FastClick实例。在页面的DOM文档加载完成后 FastClick.attach(document.body) 三.使用过程中存在的bug： 当使用FastClick 时，input框在ios上点击输入调取手机自带输入键盘不灵敏，有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透。解决方法： // 添加Fastclick移除移动端点击延迟 import FastClick from 'fastclick' //FastClick的ios点击穿透解决方案 FastClick.prototype.focus = function (targetElement) { let length; if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type

title: ionic3踩坑体验（二） date: 2018-03-15 21:34:13 tags: ionic --- ios滚动卡顿 <ion-content> 滚动在ios会卡住，当我在ios不使用 -webkit-overflow-scrolling: touch 时不会卡住但滚动效果实在是太糟糕了。 ionViewDidLoad(){ if (this.platform.is('mobileweb') && this.platform.is('ios')) { const scrollElement = this.content.getScrollElement(); scrollElement.scrollTo(0, 1); this.content.ionScrollEnd.subscribe(evt => { if ((this.content.contentHeight + 1) < scrollElement.scrollHeight) { if (scrollElement.scrollTop === 0) { scrollElement.scrollTo(0, 1); } else if ((scrollElement.scrollTop + this.content.contentHeight) === scrollElement