IOS H5点击穿透问题可以用fastclick.js解决

处理移动端click事件 300 毫秒延迟，由FT Labs开发，Github 项目地址：https://github.com/ftlabs/fastclick。从点击屏幕上的元素到触发元素的click事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？因为它想看看你是不是要进行双击（double tap）操作。兼容性
Mobile Safari on iOS 3 and upwardsChrome on iOS 5 and upwardsChrome on Android (ICS)Opera Mobile 11.5 and upwardsAndroid Browser since Android 2PlayBook OS 1 and upwards不应用 FastClick 的场景
桌面浏览器；如果viewport meta 标签中设置了width=device-width， Android 上的 Chrome 32+ 会禁用 300ms 延时；Copyviewport meta 标签如果设置了user-scalable=no，Android 上的 Chrome（所有版本）都会禁用 300ms 延迟。IE10 中，可以使用 css 属性-ms-touch-action: none禁止元素双击缩放（参考文章）。
引入插件步骤
①在HTML页面中添加注：必须在页面所有Element之前加载脚本文件先实例化fastclick②在JS中添加fastclick的身体，推荐以下做法： if('addEventListener’indocument) { document.addEventListener(‘DOMContentLoaded’,function() { FastClick.attach(document.body); },false);}如果你使用了JQuery，那么JS引入就可以改用下面的写法：$(function() { FastClick.attach(document.body);});如果你使用Browserify或者其他CommonJS-style 系统,当你调用require('fastclick')时，FastClick.attach事件会被返回，加载FastClick最简单的方式就是下面的方法了：varattachFastClick = require(‘fastclick’);attachFastClick(document.body);

作者：还好e
链接：https://www.jianshu.com/p/fdb510544d98
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

IOS H5点击穿透问题可以用fastclick.js解决相关推荐

ios html双击下移,H5页面在ios上双击div，导致屏幕上移的js解决办法
页面中的汉堡道学数里屏.中近,期据面蔽最,近,期据面键有动画效果,在安卓手机上双击没问题,在ios上双击就导致页面上移,再点击按钮就恢复了,但这样很不友好,在网上查找资料,发现很多人都用这段代码,于是 ...
document.onclick在ios上不触发的解决方法与touchstart点击穿透处理
document.onclick = function (e) {var e = e ? e : window.event;var tar = e.srcElement || e.target;if ...
H5移动页面的touch事件与点击穿透问题
先举一个例子: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
vue 点击弹出文字_vue事件点击穿透解决大法，看这篇文章就够了
作者/sherry 最近在做项目的过程中遇到一个非常奇葩的bug,在h5页面点击一个按钮弹出弹窗,但是这个弹窗刚出现就会自动消失,导致屏幕出现闪动现象,关键这个bug还是偶现的. 经过一番研究才发现是 ...
vue 点击一个按钮触发两个事件_vue事件点击穿透解决大法
最近在做项目的过程中遇到一个非常奇葩的bug,在h5页面点击一个按钮弹出弹窗,但是这个弹窗刚出现就会自动消失,导致屏幕出现闪动现象,关键这个bug还是偶现的.经过一番研究才发现是vue事件点击穿透引起 ...
fastclick 解决移动端click事件延迟300ms和点击穿透问题
一.移动端click点击事件300ms延迟介绍在正常情况下,如果不进行特殊处理,移动端在触发点击事件时,会有300ms的延迟.换句话说,当我们在点击移动端页面后不会立即做出反应,而是会等待300ms ...
【土旦】vue 解决ios H5底部输入框获取焦点时弹出虚拟键盘挡住输入框以及监听键盘收起事件...
问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图解决方法: html: <input type=&quo ...
html 遮罩层穿透问题,移动页面点击穿透问题解决方案
近期在做页面的时候,遇到了点击遮罩层时穿透下层的checkbox的问题,由于为了兼顾用户的流畅度,只能使用tap事件,click事件虽然解决了穿透的问题,但总会有300ms的延时,因此最终使用sett ...
iOS H5原生WKWebView调起支付宝客户端支付方案
iOS H5原生WKWebView调起支付宝客户端支付方案问题描述: 安卓直接WebView加载上面的URL直接可完成跳转支付宝弹出支付界面: iOS WKWebView加载这个URL,只是单纯加载 ...

IOS H5点击穿透问题可以用fastclick.js解决

IOS H5点击穿透问题可以用fastclick.js解决相关推荐

最新文章

热门文章