为什么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事件实际上是在touchEnd事件发生后大约300ms触发的，因此无论如何都会感到迟钝（延迟是等待双击），现在你有另一个不使用它的理由。

困难的部分

同时具有触摸屏和鼠标的设备。 您的选择是否想要打扰那些。 就个人而言，我倾向于与他们一起模仿点击并在移动设备上使用touch事件时生活在额外的滞后，但如果你花时间，你可以创建更精心制作的解决方案。