当mousedown直到mouseup时如何做工作？

Question

我正在 Javascript 画布中制作一个简单的播放器动作。 （上下左右）

我在屏幕上为移动播放器创建了 4 个按钮。我对按钮使用了以下代码，因为我想移动播放器直到按钮被释放。

upBtn.addEventListeter('mousedown',()=>{
    let interval=setInterval(()=>{
        player.y--;
    }, 50);
    upBtn.addEventListener('mouseup',()=>{
        clearInterval(interval);
    });
});

当在计算机中单击按钮时，上面的代码可以完美运行。但在移动端却不行。

我也尝试使用touchdown 和touchup，但没有成功。

我应该对代码进行哪些更改才能使其在移动设备中也能正常工作？

提前致谢

Answer 1

您正在寻找touchstart 和touchend

function upFunc(event) {
    //prevents some devices to emulate the click event
    event.preventDefault();
    let interval=setInterval(()=>{
        player.y--;
    }, 50);
    upBtn.addEventListener('mouseup',downFunc);
    upBtn.addEventListener('touchend',downFunc);
}

function downFunc(e) {
    e.preventDefault();
    clearInterval(interval);
}

upBtn.addEventListeter('mousedown', upFunc);
upBtn.addEventListeter('touchstart', upFunc);

请注意，要在 vanilla js 中同时支持鼠标和触摸，您必须添加两个事件侦听器。

此外，某些设备会模拟鼠标事件，因此您可以使用 preventDefault() 确保您的函数只触发一次。

Answer 2

我遇到了类似的问题，最终解决了。我不记得我如何得到最终结果的所有细节，但这是我最终用来让它工作的代码。 它用于控制摄像机器人。按住前进箭头使机器人在按住按钮时向前移动，并在松开按钮后立即停止。 它适用于 PC 浏览器和智能手机浏览器。不过，我只在三星的几个浏览器上尝试过。 它在 PC 上使用 onmousup 和 onmousedown，而在智能手机上使用触摸事件会稍微复杂一些。
同样重要的是oncontextmenu="absorbEvent_()"，它可以防止在您按住按钮时出现上下文菜单。

<button id="moveForward" 
onmousedown="moveForward_onmousedown()" 
onmouseup="anyMovementButton_onmouseup()"
onmouseout="anyMovementButton_onmouseout()" 
ontouchstart="moveForward_onmousedown()" 
ontouchend="anyMovementButton_onmouseup()"
ontouchmove="anyMovementButton_onmouseout()"
ontouchcancel="anyMovementButton_onmouseout()" 
oncontextmenu="absorbEvent_()">
<svg width="34" height="34">
<polygon points="2,32 17,2 32,32" style="fill:lime;stroke:purple;stroke-width:3;fill-rule:evenodd;"></polygon>
</svg>
</button>

                function moveReverse_onmousedown()      {startMovement('reverse'); }
                function moveForward_onmousedown()      {startMovement('forward'); }
                function   moveRight_onmousedown()      {startMovement('right'  ); }
                function     tiltUp_onmousedown()       {   singleMove('up'     ); }
                function    tiltDown_onmousedown()      {   singleMove('down'   ); }
                
                function anyMovementButton_onmouseup()   {stopMovement();}
                function anyMovementButton_onmouseout() {stopMovement();}

function absorbEvent_(event) 
{
    var e = event || window.event;
    e.preventDefault && e.preventDefault();
    e.stopPropagation && e.stopPropagation();
    e.cancelBubble = true;
    e.returnValue = false;
    return false;
}