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

please refer to https://stackoverflow.com/a/51333864/3381996 — Hassan Mohagheghian, Oct 08 '21 at 06:23
Yeah I have even tried `touchstart` and `touchend`. But it didn't work. — Ruthvik, Oct 08 '21 at 06:26

score 2 · Accepted Answer · answered Oct 08 '21 at 06:42

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.

Yeah thanks for your suggestion. It actually worked. Sorry for the late reply. — Ruthvik, Oct 09 '21 at 16:13

score 2 · Answer 2 · edited Oct 05 '22 at 10:32

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;
}

I just realised the code in the function absorbevent_ is messed up and shouldn't work. My apologies for that.At first I thought I copied from an older version but I've just turned on the robot and tried it and found that the code in the html it serves is exactly the same and yet it is working, so perhaps that fucntion is not doing anything useful after all. If it is of any use I can post the whole html with javascipt. — Christian, Oct 08 '21 at 10:33

How to do a work when mousedown until mouseup?

2 Answers2