IOS系统下fastclick.js导致input+label单击失效

最新推荐文章于 2024-06-06 10:54:35 发布
最新推荐文章于 2024-06-06 10:54:35 发布
阅读量856 收藏 1
点赞数 1
分类专栏： web 移动端 文章标签： bug ios兼容 fastclick.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cannon9527/article/details/102823717
版权
在iOS设备上，使用fastclick.js会导致input+label组合的单击失效，表现为需要双击且有延迟。问题源于fastclick.js的onMouse方法。解决办法是：一、为label内的所有直接子元素添加'needsclick'类；二、为这些子元素添加'pointer-events:none'样式，以确保点击行为正常。
摘要由CSDN通过智能技术生成

IOS系统下fastclick.js导致input+label单击失效

				<li v-for="(i,k) of staffList" :key="i.UserId">
                    <input type="checkbox" :id="i.UserId" :value="i.UserId" v-model=
最低0.47元/天 解锁文章
cannon9527
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
快速解决vue在ios端下点击响应延时的问题
12-01
在apicloud开发中遇到的问题：用vue.js的点击事件，安卓点击响应迅速而ios点击响应有延时（大约300ms）. 解决方案如下： 引入[removed][removed] 然后在页面加载时，使用 $(function() { FastClick.attach(document.body); }); 以上这篇快速解决vue在ios端下点击响应延时的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
input标签后添加label标签使得点击事件出错
xiaosheng
08-06 534
在画线位置加了两个label标签,目的是为了点击整个li也可以选中复选框 但是,此时在点击ceshi1的时候,选中的却是ceshi0 原因是因为用了循环,所以所有的input的ID是相同的,所以就会出错 解决办法: 参考文件: Vue官方文档(input表单) Vue官方文档(模板语法,Vue中是可以在引号中写变量并且可以解析) ...
记录使用fastclick插件在ios系统中产生的bug
最新发布
Cy01234的博客
06-06 628
前段时间为了提高iOS端的性能和使用体验，安装了fastclick插件。fastclick插件确实在iOS端让点击事件和交互变的流畅，让用户体验感比较好。不过正当我感觉一切都大功告成的时候，用户反馈某个部分点击之后页面就卡着不动了，这让我安下的心又悬了起来，立马打开代码排查问题，果然bug存在而且是成对存在。
label标签的for属性无法实现的出现及解决方案
clover_oreo的博客
11-05 3613
可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，将一个 和一个 元素相关联。而且也无法实现点击文字“用户名”跳转到输入框。光标移动，会有提示“无效的id引用”
HTML使用label标签出错
weixin_44879122的博客
03-21 706
#HTML使用label标签出错 ##label标签定义 label标签是input表单标签的标注标签，可以绑定一个表单元素，当鼠标单击label标签对应的元素时，浏览器自动将焦点移动到对应的表单元素或鼠标自动选择对应的表单元素。 例如： 当鼠标点击”男人“或者”女人“时会自动选中 ##label标签使用意义 增加用户体验 ##label标签出错 语法不规范：中文“” 或者 有空格 ...
fastclick.js
04-21
fastclick.js 解决移动端300毫秒延迟插件
fastclick.min.js
04-04
快速点击，解决ios连续点击时延迟300ms问题，实测试可用。
fastClick.js
05-03
解决ios和微信端，onclick延迟加载问题，在初始化function中执行 FastClick.attach(document.body);
Ios移动端fastClick导致 input触控不灵敏的解决办法！
草莓味的青
08-25 1275
移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，就有了FastClick。安装完发现输入框点击变得不灵敏，第二次点击页面中的输入框需要长按一会才能正常唤起键盘输入。我用的是vue3 这里直接再main.js修改即可！最后再在全局文件添加以下样式。
使用FastClick解决ios设备上vant Popover组件点击两次才有响应 的问题
天麟江的博客
07-06 2637
今天在开发项目的时候，遇到了一个很诡异的问题，ios设备上，Popover弹框需要点击两次才可以有响应。经过一波分析之后，我首先将问题定位在了点击穿透上，尝试了几个网上提供的方法之后还是无效，后来我找来了一台安卓手机，访问相同的地址，结果，安卓手机一切正常，所以我便把精力放在了ios连续点击两次才有响应的问题上来了。 之前，我已经解决了ios需要点击两次input才有反应的问题，解决方式我也整理为了一篇文章：解决ios设备点击两次才有响应的问题。 所以我想...
jquery下关于input和label的关于点击事件的坑
a1178118728的博客
03-07 359
待填坑： 法院费用结算页面的案件类型 转载于:https://www.cnblogs.com/waterFowl/p/8523007.html
VUE fastclick input 点击框输入失效， 需要点击两次
xz370057448的博客
09-25 6944
照搬github上面的东西了    can not bring up keyboard instantly in ios 11.3     FastClick.prototype.focus = function(targetElement) { var length; // Issue #160: on iOS 7, some input elements (e.g. date da...
采坑道路1：IOS fastclick 获取焦点点击失效，需要多次点击（混合开发）
爱吃牛肉的政
02-21 2731
应用场景：因为项目用前端混合式开发，在ios手机会有300ms的延迟，所以用到了[fastclick.js](https://github.com/ftlabs/fastclick)。 按照官方的说明，直接引用，如下 if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', functi...
解决因引入了fastclick导致的ios系统输入框需要长按/双击才能输入的问题
qiuqiula_的博客
03-17 1102
转载自：https://www.cnblogs.com/blackbentel/p/11138017.html 因为是在代码中引入了fastclick导致的问题，所以重写其 focus 方法： ```javascript import FastClick from 'fastclick' // 修复点击300ms延迟 if ('addEventListener' in document)...
js解决按需引入文件（IOS11引入fastclick有bug）
电鳗的博客
10-12 5212
IOS11 已经解决了点击延迟的问题，引入 fastclick 反而会导致页面在 IOS 下面点击失灵；IOS 11 以下还需要引入 fastclick ，11 开始不用的问题
label 两次点击 事件冒泡 使用时间戳的解决方案
weixin_30733003的博客
04-05 96
情况描述：在页面中input 和 label 通过for banding 然后点击input 或者label的时候都要执行一个方法 　　　　 但是在点击label的时候有两次执行两次的情况,及监听到的click---事件冒泡。 解决方案：1：不用label 2:解决它 　　　　　　这里提供一种时间戳的解决方案 页面HTML: <span onclick="checkrem...
fastclick.js在点击一个可输入的div时，ios无法正常唤起输入法键盘
JUSTIN的博客
04-07 3039
前言 为了提升移动端click的响应速度，使用了fastclick.js这么一个库。 这个库导致这个可编辑的div被点击无法轻松的唤起输入法。 长按才能成功。div的一个contentEditable=”true” 解决方案 首先：再你的编辑器中增加一个class属性。我用的是quilljs &lt;div id="editor" class="needsclick"&gt;&...
fastclick.js对input的点击失效！
細水、長流√的专栏
01-16 1980
在引用fastclick.js来对移动端页面消除300ms的延迟，但是在书写表单时，点击type='text'的input没有效果，有时有可能可以点击，但是大多数input是无法点击的，在去掉fastclick.js后input的点击就正常了。这是为什么？是fastclick.js的bug吗？还是要对input标签做特殊处理？ 1. fastclick对input标签做了很多浏览器的兼容处理,...
Fastclick 导致click事件触发两次的问题，fastclickclick
05-23
Fastclick 是一个用于解决移动端点击事件延迟的 JavaScript 库，在某些场景下可能会导致点击事件触发两次的问题。这是因为 Fastclick 在绑定点击事件时，会在 touchstart 和 touchend 时都触发一次事件处理函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值