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

【问题标题】：Context menu event hiding mouse up on android在android上隐藏鼠标的上下文菜单事件
【发布时间】：2017-07-28 20:41:22
【问题描述】：

我有一张图片，我需要测量用户触摸图片或鼠标在图片上按下的时间。所以我使用鼠标按下事件来获取开始时间和鼠标按下事件来获取完成时间。但是，在安卓设备上运行时，长按会触发上下文菜单弹出，这是我不想要的。我可以通过在上下文菜单事件上添加功能并从中返回 false 来隐藏上下文菜单。上下文菜单被阻止且不显示。但是鼠标向上事件也没有触发。

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

Jsfiddle [这里][1]

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

【问题讨论】：

你试过touchstart和touchend吗？
你能不能把你的评论变成答案，我会接受的。
完成，不客气:)

标签： javascript mobile-browser

【解决方案1】：

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

【讨论】：

【解决方案2】：

回答我自己的问题。我被我的同事弄糊涂了，他说浏览器足够聪明，可以将触摸事件转换为鼠标事件，这是不正确的。为了解决这个问题，我需要另外监听@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>

【讨论】：