mousedown until mouseup 时怎么办？

Question

我正在 Javascript canvas 中做一个简单的玩家动作。（左上右下）

我在屏幕上为移动播放器创建了 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;
}

mousedown until mouseup 时怎么办？

How to do a work when mousedown until mouseup?

javascript

events

mousedown

mouseup