输入复选框/单选按钮在平板电脑/手机上响应缓慢

Question

在平板电脑或移动设备上触摸输入复选框时，响应速度很慢，而不是即时响应。有什么办法可以提高响应时间吗？我正在以IOS的风格设计我的单选按钮，如下所示。

<div class="iradio simulation-method">
  <input name="simulation-method" id="upload-photos" value="0" checked="checked" type="radio">
  <label for="upload-photos" class="simulation-method-label-js"><svg class="icon icon_camera"><use xlink:href="#icon_camera"/></svg>Photos</label>
  <input name="simulation-method" id="scan-ipad" value="1" type="radio">
  <label for="scan-ipad" class="simulation-method-label-js"><svg class="icon icon_ipad"><use xlink:href="#icon_ipad"/></svg>Scan</label>
</div>

有点像这个例子： https://codepen.io/wesruv/pen/vexkd

Answer 1

这是正常行为，因为Safari正在等待用户想要点击单选按钮，或者想要双击单选按钮所在的区域（缩放）。 可以使用CSS禁用此行为：touch-action: manipulation; 你可以将它应用于输入，标签......或者html标签，这样即使在链接上也不会有任何延迟。