Den*_*nis 2 html javascript browser mobile
我的代码采用鼠标位置。手机浏览器支持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 代码，如果您发现有帮助，请查看并帮助我进行一些更改。
Nin*_*olz 10
因为触摸事件不是鼠标事件。如果添加鼠标，则可以获得鼠标事件。
对于触摸事件，您需要使用
pointerup
pointerdown
事件/事件监听器。阅读有关pointerup和pointerdown 的更多信息。
用法：也添加addEventListenerfor 指针。
document.getElementById('elem1').addEventListener('pointerdown', methodForPointerDown, false);
document.getElementById('elem1').addEventListener('pointerup', methodForPointerUp, false);
对于移动浏览器，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 */
}
}
希望这对你有帮助..