点击穿透bug · Jaywii

微信点击穿透Bug

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

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

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

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

1 大专栏  点击穿透bug · Jaywiiline">2 3 4

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

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

1 2 3 4

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