android 上的上下文菜单事件隐藏鼠标

Question

我有一张图片，我需要测量用户触摸图片或鼠标在图片上按下的时间。所以我使用鼠标按下事件来获取开始时间，使用鼠标释放事件来获取结束时间。但是，当 android 设备上的运行时，长按会触发上下文菜单弹出，这是我不想要的。我可以通过在上下文菜单事件上添加函数并从中添加 return false 来隐藏上下文菜单。上下文菜单被阻止并且不显示。但是鼠标松开事件也没有触发。

如何阻止上下文菜单并仍然有鼠标松开事件？

Jsfiddle [此处][1]

  [1]: https://jsfiddle.net/vghk9q53/5/

Answer 1

回答我自己的问题。我被我的同事弄糊涂了，他说浏览器足够聪明，可以将触摸事件转换为鼠标事件，这是不正确的。为了解决这个问题，我需要额外监听@Mazz 指出的触摸结束事件。解决方案的 JsFiddle

<body>
  <img id="image" src="https://launchbit.com/carbon-i/6496-ZenHubCarbon.png" alt="" border="0" height="100" width="130" style="max-width: 130px;">
  <textarea id="text" rows="25"></textarea>
  <script>
    function printOutput(txt) {
      console.log(txt);
      document.getElementById("text").value = document.getElementById("text").value + txt + "\n";
    }
    window.addEventListener("load", function(event) {
      document.getElementById("image").oncontextmenu = function() {
        printOutput("context menu");
        return false;
      };
      document.getElementById("image").addEventListener("mousedown", function() {
        printOutput("mouse down");
      });
      document.getElementById("image").addEventListener("mouseup", function() {
        printOutput("mouse up");
      });
      document.getElementById("image").addEventListener("touchstart", function() {
        printOutput("touchstart");
      }, false);
      document.getElementById("image").addEventListener("touchend", function() {
        printOutput("touchend");
      }, false);
      document.getElementById("image").addEventListener("touchcancel", function() {
        printOutput("touchcancel");
      }, false);
      document.getElementById("image").addEventListener("touchmove", function() {
        printOutput("touchmove");
      }, false);
    });
  </script>
</body>

Answer 2

而不是使用 mousedown 和 mouseup 你应该使用 touchstart 和 touchend

android 上的上下文菜单事件隐藏鼠标

Context menu event hiding mouse up on android

javascript

mobile-browser