logo标签列表

在Android上，preventDefault()无法停止mouseup事件

javascriptandroidjquery
3
我正在尝试检测鼠标抬起或触摸结束事件，但不希望它触发两次。完整示例请参见此处：
<!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事件，但我不想等待mouseup事件在平板电脑上触发的延迟。而且，我需要为非平板设备包括mouseup事件。我也不想测试触摸功能，然后解除鼠标支持，因为有些人可能同时使用具有触摸和鼠标支持的笔记本电脑。我只想让Android停止触发mouseup事件。
你能否尝试在回调函数中返回 false？ - bitoiu
@bitoiu，我在我的帖子中提到了“return false”。但它也没有起作用。 - kbriggs
3个回答
0

我刚遇到了同样的问题，只能找到一个非常丑陋的解决方案：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);
  }
0

我正在处理不需要的事件（例如突然的Android鼠标弹起）。

由于我正在监听触摸事件并收到意外的鼠标弹起，我的解决方案是将所有事件传递到过滤器（[node].setEventListener），该过滤器将确定我是否希望它们发生，并通过在批准的事件对象上设置自定义标志来停止任何我不想要的事件，并防止/停止任何缺少它的事件。

这样我就能避免超时。虽然不太优雅，但暂时可以更好地控制系统。

0
我没有实现一个按钮控件，也不解释为什么preventDefault在touchend中不像在iOS中一样工作。然而，在那篇文章中有一件事引起了我的注意，关于在touchstart中使用preventDefault。如果我将touchstart包含在我的绑定中，然后在它触发时忽略它，preventDefault就会停止Android中的鼠标事件。但在我看来，这仍然是一个错误。我有一个旧版本的Android（2.2.1），所以可能自那时以来已经修复了。 - kbriggs
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接