Question

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

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

Jsfiddle [here] [1]

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

Answer 1

您应该使用mousedown和mouseup

而不是touchstart和touchend

Answer 2

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

＆＃13;

<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>

＆＃13;

上下文菜单事件在鼠标

2 个答案: