Question

我正在尝试检测mouseup或touchend事件，而不会触发两次。这里有完整的例子：

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#t").on("touchend mouseup", function(e){$("body").append(e.type + "<br>"); e.preventDefault();});
      });
    </script>
  </head>
  <body>
    <div id="t" style="position: absolute; left: 200px; width: 200px; height: 200px; background: blue;"></div>
  </body>
</html>

在平板电脑上，touchend事件首先触发，然后在延迟之后触发mouseup事件。所以我包含e.preventDefault（）行，并根据需要在iPad上停止mouseup事件。但它对Android没有影响。两件事都还在发生。使用“return false”，stopPropagation（）和/或stopImmediatePropagation（）也没有效果。请注意，我可以删除touchend事件，但我不希望平板电脑上的延迟等待鼠标触发。我需要为非平板电脑设备添加鼠标。我也不想测试触摸功能，然后取消绑定鼠标支持，因为有人可以拥有支持触摸和鼠标支持的笔记本电脑并同时使用它们。我只是希望Android停止触发mouseup事件。

Answer 1

几年前谷歌发表了一篇关于这件事的文章，称之为FastButtons。这个实现应该这样做：

https://developers.google.com/mobile/articles/fast_buttons

Answer 2

我刚遇到同样的问题，只能找到一个非常难看的解决方案：setTimeout。

http://jsfiddle.net/FjuHu/6/

/**
   * Prevent Android from triggering buggy phantom clicks
   *
   * @param {jQuery} $element
   */
  function preventPhantomClicks($element) {
    /**
     * Click catcher
     * @param {!jQuery.event=} event
     */
    function preventHandler(event) {
      event.preventDefault();
    }

    // catch all events for the next 350ms
    $element.on('click', preventHandler);
    setTimeout(function () {
      $element.off('click', preventHandler);
    }, 350);
  }

Answer 3

我正在与不想要的事件（例如突然的android鼠标）进行搏斗。

由于我正在侦听touchup并获得意外的mouseup，我的解决方案是将所有事件传递到过滤器（[node] .setEventListener），这将决定我是否希望它们发生，并且我会停止任何我不希望通过在已批准的事件对象上设置自定义标志，以及阻止/停止任何缺少它的事件。

我能够以这种方式避免超时。不优雅，但暂时对系统进行了更多控制。

preventDefault（）不会在Android上停止mouseup事件

3 个答案: