5

我有一个简单的矩形锚标签。click我使用 jQuery来响应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事件也适用于胖手指？

问题动画

仅在边缘点击时触发点击

仅触摸触发单击

预期行为，两个事件

触摸触发两个事件

4

1 回答 1

2

问题

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

解决方案

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

困难的部分

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

于 2015-06-02T19:14:36.657 回答