微信点击穿透Bug
问题描述:
在移动端为了去除点击延迟引入了fast-click,然而在房贷计算器的开发中遇到了这样一个bug,用户点击了select之后,微信在弹出选择器之后会瞬间因为约300ms的点击穿透
而立刻收起来,导致用户无法使用选择器,最初尝试在用户点击了Select之后为select下面的表单层添加pointer-events:none
的CSS样式避免屏蔽点击效果,结果发现这样做只能保障穿透下去的点击事件不会点进input框导致聚焦事件发生,但是依旧无法避免弹出来的选择器收起来,初步猜测应该是由于穿透下去的点击相当于点击了一次空白区域,导致选择器收了起来。
解决方案:
最终在师傅建议下屏蔽了fast-click
之后发现点击穿透现象消失,问题得以解决,但是由于关闭了fast-click
导致点击事件响应变慢,用户点击input之后可以感觉到明显聚焦延迟。
关闭fast-click
导致的光标自动移到最右侧失效
问题描述:
在解决微信端点击穿透bug之前,采用下面这样的一段代码来将input的光标移到最右侧:
|
|
结果在屏蔽了fast-click
之后不知为何该方法失效,尝试了在监听tap
和focus
事件,并在事件发生之后使用定时器延迟赋值发现可以将光标置右,但是延迟非常明显,不管setTimeout
中的间隔设为多少,都有将近1秒的延迟
解决方案:
将绑定是事件改为click
之后,问题得到了解决,如下:
|
|