How to do a work when mousedown until mouseup?

Question

I'm making a simple player motion in Javascript canvas. (Up down left right)

I created 4 buttons on screen for mobile players. I used the following code for the buttons as I wanted to move the player until the button is released.

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

The above code works perfectly when the buttons are clicked in a computer. But in mobile it is not working.

I also tried to use touchdown and touchup but it didn't work.

What changes should I make in the code to make it work in mobile also?

Thanks in advance

Answer 1

You're looking for touchstart and 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);

Note that to support both mouse and touch in vanilla js you'll have to add both event listeners.

Also, some devices emulate the mouse events, so you can use preventDefault() to make sure your functions fires only once.

Answer 2

I had a similar issue and eventually solved it. I don't remember all the details of how I got to the end result but here is the code I eventually used to get it to work. It is for controlling a camera robot. Pressing and holding the forward arrow makes the robot move forward while the button is held down and stops as soon as the button is released. It works both on PC browser and on smartphone browsers. I've only tried it on a couple of browsers on Samsung though. It uses the onmousup and onmousedown for the PC while for the smartphone it is a bit more complicated using the touch events.
Also important is the oncontextmenu="absorbEvent_()" which prevents the context menu from appearing when you hold down a button.

<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    moveLeft_onmousedown()      {startMovement('left'   ); }
                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();}

// this function is for preventing context menu on mobile browser
function absorbEvent_(event) 
{
    var e = event || window.event;
    e.preventDefault && e.preventDefault();
    e.stopPropagation && e.stopPropagation();
    e.cancelBubble = true;
    e.returnValue = false;
    return false;
}