为什么 Android 点击区域的半径比 touchstart 更宽？我怎样才能使它一致？

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;
  }

I built this as a demo to show the problem I'm talking about.

当您点击矩形锚点的边缘时，只会触发 click 事件。当您点击该区域的中心时，click 和 touchstart 都会被触发。

为什么胖手指检测似乎只有 click 被触发？有没有办法让 touchstart 事件也适用于粗手指？

问题动画

边缘点击只会触发点击

预期行为，两个事件

Answer 1

问题

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

解决方案

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

困难的部分

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

为什么 Android 点击区域的半径比 touchstart 更宽？我怎样才能使它一致？

Why does Android click area have a wider radius than touchstart? How can I make it consistent?

javascript

android

click

touchstart

问题动画

问题

解决方案

困难的部分