我正在用" pointer " "事件。
这在我的台式机和我的鼠标上工作，但在我的(android)手机上不行。我应该能够画出曲线，但是用我的手指在手机上拖动会导致一个"进入"。还有一些"动作"。但它又"离开"了。
必须在线:https://dbarc.net/SOtest.html
<!DOCTYPE html>
<html>
<!-- works on desktop, leaves on phone (dbarc.net/SOtest.html) -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { width:400px; }
#canvas { background:#eee; }
</style>
<script>
"use strict";
let canvas, ctx, xx, yy, infodiv;
window.onload = function() {
infodiv = document.getElementById("infodiv"); // info output
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
// canvas.addEventListener('pointerenter', function() { ptrEnter(); } );
canvas.addEventListener('pointerenter', ptrEnter); // better
canvas.addEventListener('pointerleave', ptrLeave);
canvas.addEventListener('pointermove', ptrMove);
}
function ptrEnter() { // shows an enter
infodiv.innerHTML += "ENTER ";
}
function ptrLeave() { // shows a leave
infodiv.innerHTML += "LEAVE ";
}
function ptrMove(ev) { // draws (no pen up/down)
infodiv.innerHTML += "m ";
let x0 = canvas.offsetLeft, y0 = canvas.offsetTop;
let xold = xx, yold = yy;
xx = Math.floor(ev.clientX) - x0;
yy = Math.floor(ev.clientY) - y0;
ctx.beginPath();
ctx.moveTo(xold,yold);
ctx.lineTo(xx, yy);
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<div id="infodiv">Events: </div>
</body>
</html>
花了几个小时后，我找到了这个问题的正确解决方案。首先，事件应该是touchmovenot"mousemove">对于非桌面设备。其次，要获取clientX和cliententy的值，必须使用event. targettouch [0].clientX或.clientY。完整代码如下:
<!-- <!DOCTYPE html>
<html>
<!-- works on desktop, leaves on phone (dbarc.net/SOtest.html) -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
width: 400px;
}
#canvas {
background: #eee;
}
</style>
<script>
"use strict";
let canvas, ctx, xx, yy, infodiv;
let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile/i.test(navigator.userAgent);
window.onload = function () {
infodiv = document.getElementById("infodiv"); // info output
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.addEventListener('pointerenter', function () { ptrEnter(); });
canvas.addEventListener('pointerleave', function () { ptrLeave(); });
canvas.addEventListener(isMobile ? 'touchmove' : "mousemove", function (ev) { ptrMove(ev); });
}
function ptrEnter() { // shows an enter
infodiv.innerHTML += "ENTER ";
}
function ptrLeave() { // shows a leave
infodiv.innerHTML += "LEAVE ";
}
function ptrMove(ev) { // draws (no pen up/down)
infodiv.innerHTML += "m ";
let x0 = canvas.offsetLeft, y0 = canvas.offsetTop;
let xold = xx, yold = yy;
if (isMobile) {
xx = Math.floor(ev.targetTouches[0].clientX) - x0;
yy = Math.floor(ev.targetTouches[0].clientY) - y0;
} else {
xx = ev.clientX - x0;
yy = ev.clientY - y0;
}
ctx.beginPath();
ctx.moveTo(xold, yold);
ctx.lineTo(xx, yy);
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<div id="infodiv">Events: </div>
</body>
</html> -->