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

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

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

的jsfiddle [这里] [1]

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

来源

2017-03-08 Mikhail Chibel

你试过'touchstart'和'touchend'？ – Mazz

你能转换你的评论到答案，我会接受它。 –

完成，欢迎您:) – Mazz

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

来源

2017-03-09 07:45:51 Mazz

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

来源

2017-03-08 20:06:29

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

回答

相关问题