微信点击穿透Bug

问题描述:
在移动端为了去除点击延迟引入了fast-click,然而在房贷计算器的开发中遇到了这样一个bug,用户点击了select之后,微信在弹出选择器之后会瞬间因为约300ms的点击穿透而立刻收起来,导致用户无法使用选择器,最初尝试在用户点击了Select之后为select下面的表单层添加pointer-events:none的CSS样式避免屏蔽点击效果,结果发现这样做只能保障穿透下去的点击事件不会点进input框导致聚焦事件发生,但是依旧无法避免弹出来的选择器收起来,初步猜测应该是由于穿透下去的点击相当于点击了一次空白区域,导致选择器收了起来。

解决方案:
最终在师傅建议下屏蔽了fast-click之后发现点击穿透现象消失,问题得以解决,但是由于关闭了fast-click导致点击事件响应变慢,用户点击input之后可以感觉到明显聚焦延迟。

关闭fast-click导致的光标自动移到最右侧失效

问题描述:
在解决微信端点击穿透bug之前,采用下面这样的一段代码来将input的光标移到最右侧:

1
2
3
4
$("input[type='number']").tap(function() {
var value = $(this).val();
$(this).val('').val(value);
});

结果在屏蔽了fast-click之后不知为何该方法失效,尝试了在监听tapfocus事件,并在事件发生之后使用定时器延迟赋值发现可以将光标置右,但是延迟非常明显,不管setTimeout中的间隔设为多少,都有将近1秒的延迟
解决方案:
将绑定是事件改为click之后,问题得到了解决,如下:

1
2
3
4
$("input[type='number']").click(function() {
var value = $(this).val();
$(this).val('').val(value);
});