关于fastclick的作用这里就不再赘述了, 主要记录一下当时部门里的一个同事遇到了, 在iOS12.2上点击input file输入框很难唤起, 后来有同事建议他给input加上class="needsclick", 然后神奇的解决了此问题, 处于好奇心便想看一下什么原因解决,于是到github上打开了源码看了起来.
屏幕快照 2019-04-25 上午11.46.09.png
我们全局搜索needsclick, 发现只有四处地方用到, 并且发现关于class的影响只有这一处,
就是这个正则表达式的返回值return (/\bneedsclick\b/).test(target.className); 添加class后正常返回的就应该是true, 同理没加这个class的时候返回的应该是false, 我们再回过头看源码, 正常情况下当进入case 'input' 并且input type类型是file的iOS手机上的时候应该就返回了true, 所以加不加class理论上应该都没有问题,后来询问得知该同事为了解决iOS textarea上很难点击的问题,对needsClick方法做了修改, 修改如下图:
屏幕快照 2019-04-25 下午12.32.58.png
由图中我们可以得知, 他加了if (target.className.includes('needsclick')) return true
target = target.parentNode,这2句代码 , 所以在我们加了class后同样会返回true, 但是为什么我们不加class的时候会返回false呢? 因为 target = target.parentNode这句代码修改了target的指向,虽然满足了case 'texttarea',解决了texttarea上点击问题, 但是却导致在case 'input', if ((deviceIsIOS && target.type === 'file') || target.disabled)上并没有进入条件语句中, 原因就是改变了target的指向, 最后return (/\bneedsclick\b/).test(target.className); 因为没加class所以导致了返回false.
解决方法:
1. 添加class="needsclick", 直接可以解决问题
2. 在你改变target指向的时候, 保留一份原target, 用保留下的原target, 代替case 'input'中if条件语句中的target, 这样同样会返回true
这2种方法都可以满足既解决富文本点击问题和input file输入框很难唤起问题, 完结.
网友评论