为什么Android点击区域的半径比触摸开始更宽？我怎样才能使它保持一致？

Question

我有一个简单的矩形锚标签.我用jQuery来回应click,并touchstart与下列事件:

  $(document).ready(function() {
      $("#button").on("click touchstart", function(e) {
          $("#log").append(e.type + "<br/>");
      });
  });

HTML看起来像这样:

<div id="wrapper">
  <a id="button" href="#">&nbsp;</a>
</div>
<div id="log">Log:<br></div>

CSS很简单:

  #wrapper {
      padding:50px;
  }
  #button {
      display:block;
      width:200px;
      height:40px;
      text-decoration:none;
      color:#333;
      background-color:#efefef;
      border:0px;
      padding:0px;
      margin:0px;
  }

我把它作为一个演示来构建,以显示我正在谈论的问题.

点击矩形锚点的边缘时,仅click触发事件.当您点击该区域的中心,无论是click和touchstart被解雇.

为什么它click似乎只是用胖指检测触发？有没有办法使这个touchstart活动也适用于肥胖的手指？

---

动画的问题

只有在边缘点击时触发点击

预期的行为,两个事件

Answer 1

问题

触摸设备上的事件click旨在模拟基于点击的点击。这里有一个大问题，因为触摸界面与桌面界面有很大不同。最大的区别是什么？鼠标点击比手指触摸精确得多。为了确保桌面站点和应用程序至少在一定程度上有用，您所观察到的行为是经过设计的。这样，移动电话上的用户仍然能够单击小链接，即使他的手指实际上太不精确而无法准确单击该链接。

解决方案

您不会喜欢这样，但解决方案就是不要click在触摸屏设备上使用事件。通常不会这样做，因为该click事件实际上是在事件发生后 300 毫秒左右触发的。touchEnd，因此无论哪种方式都会感觉滞后（延迟是为了等待双击），现在您有另一个不使用它的理由。

困难的部分

同时具有触摸屏和鼠标的设备。您可以选择是否要为这些烦恼。就我个人而言，我倾向于在touch移动设备上使用事件时模拟点击并忍受额外的延迟，但如果您花时间，您可能可以创建更精心设计的解决方案。