为什么（MouseUp mouseDown）在移动浏览器上不起作用？

Question

我的代码处于鼠标位置。 移动浏览器支持html5。 但不能使用MouseUp mouseDown如何解决？

 <!DOCTYPE HTML> <html> <head> <body style="background-color:3F6E6F;"> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="1200" height="1000" onmousedown="mouseDown()" onmouseup="mouseUp()"></canvas> <p id="demo"></p> <script> var depx = 0; var depy = 0; var flag = 0; function writeMessage(canvas, message) { var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.font = '18pt Calibri'; context.fillStyle = 'black'; context.fillText(message, 10, 25); } function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); function mouseDown() { canvas.addEventListener("mousemove", myFunction); } function myFunction(evt) { var mousePos = getMousePos(canvas, evt); if (flag == 0) { depx = mousePos.x; depy = mousePos.y; } flag = 1; var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y + ' abs position ' + (mousePos.x - depx) + ',' + (mousePos.y - depy); writeMessage(canvas, message); } function mouseUp() { flag = 0; canvas.removeEventListener("mousemove", myFunction); } </script> </body> </html>

这是Html和Css代码，请查看一下，如果有任何帮助的话，请帮助我进行一些更改。

Answer 1

因为触摸事件不是鼠标事件。 如果添加鼠标，则可能会发生鼠标事件。

对于触摸事件，您需要使用

pointerup
pointerdown

事件/事件监听器。 阅读更多有关pointerup和pointerdown的信息。

用法：还为指针添加addEventListener 。

document.getElementById('elem1').addEventListener('pointerdown', methodForPointerDown, false);
document.getElementById('elem1').addEventListener('pointerup', methodForPointerUp, false);

Answer 2

对于移动浏览器，MouseUp和mouseDown还有一种选择，因为它们不使用鼠标。

对于移动浏览器，您可以使用touchstart和touchend代替它们。

这里有一个参考链接

这是移动设备的另一组事件侦听器。

指针事件

这是一个如何使用指针事件侦听器检测指针设备类型的示例

检测来自用户的输入类型

window.addEventListener("pointerdown", detectInputType, false);

function detectInputType(event) {
    switch(event.pointerType) {
        case "mouse":
            /* mouse input detected */
            break;
        case "pen":
            /* pen/stylus input detected */
            break;
        case "touch":
            /* touch input detected */
            break;
        default:
            /* pointerType is empty (could not be detected)
            or UA-specific custom type */
    }
}

希望这对您有帮助。

为什么（MouseUp mouseDown）在移动浏览器上不起作用？

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-11-28 07:26:59

解决方案2
0 2016-11-28 07:31:10

为什么（MouseUp mouseDown）在移动浏览器上不起作用？

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-11-28 07:26:59

解决方案2 0 2016-11-28 07:31:10

解决方案1
0 已采纳 2016-11-28 07:26:59

解决方案2
0 2016-11-28 07:31:10