We Keep Coding

How to do a work when mousedown until mouseup?

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

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.

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

Strange behavior with openlink with middle mouse combined with alert

So I posted a answer to this question Disable mouse scroll middle click event with jQuery
And came up with this solution. I know how to solve this problem, but I just cant understand why this behavior is happening
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button pressed, dont open");
}
}
click here
After some time a got a comment saying it doesn't work when removing the alert(), so i tested it and he was right. Now the tab is opened on middle mouse click
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
}
}
click here
What is causing this behavior? First i thought it was a chrome feature/bug but it's the same behavior with edge and IE

How to Prevent Scrolling on mobile when you focus on a new input?

I'm using the javascript focus() function to automatically jump from one input block to the next. Unfortunately, on mobile chrome every time you call the focus() function chrome decides to flicker or twitch to refocus to the next block. Is there any way to stop the default refocusing/scrolling behavior when focus() is called? Here's a 10 second video of my problem on mobile chrome.
https://youtu.be/UmHJVxqrLS8
I would think this would work but it doesn't.
code[i + 1].focus({preventScroll: true});
These answers didn't really help me either Preventing page from scrolling on focus switching

Check this out, am sure it will help you.
https://codepen.io/wesleypimentel/pen/KpgXJW?editors=0010
function keydown(e) {
for (var i = keys.length; i--;) {
if (e.keyCode === keys[i]) {
preventDefault(e);
return;
}
}
}

Javascript events in Chrome and Firefox

I noticed that these function doesn't work good in Firefox, but does in Chrome.
I use these function in a game in Js to shoot bullet (left mouse click) and to create a fireball all around the player with the right click that burns everyone in a small radius.
document.onclick = function(event) {
if(!player){ //to avoid onclick to be used before calling Player();
return;
}
if(player.canAttack && player.distance >= 80) { //not for sword attack
performAttack(player);
player.canAttack = false;
}
if(player.distance < 80)
performAttack(player);
//event.preventDefault();
}
document.oncontextmenu = function(event) {
//hide default behaviour of right click -> no context menu popup
event.preventDefault();
if(player.obtainedGadjet > 0) {
player.pressingMouseRight = true;
performSpecialAttack(player);
}
}
In the performAttack function I set player.isStopped = true, so my updatePlayer() doesn't change player.x and player.y while he's attacking. The same for the fireball attack. I want my player stays there.
It works in chrome, my player stops, attacks,and then can moves again, but in Firefox if I right click it somethimes acts instead as I have left clicked, so shoot the magic ball, and maybe then the fireball too. Furthermore, my player ignore isStopped = true, it seems like in Firefox oncontextmenu has "lower priority" than other events.
Any idea?
Thanks

Please note that a click event contains information about which button was pressed. You can try yourself with something like:
document.addEventListener('click', function(ev){
console.log(ev.button);
});
And, yes, click events are fired when you right-click, even if you're doing something on related contextmenu events.
So your code should look a bit more like
document.addEventListener('click', function(ev){
if (ev.button === 0) {
// Perform primary action
} else if (ev.button === 2) {
// Perform secondary action
}
});
document.addEventListener('contextmenu', function(ev){
ev.preventDefault();
});

Using the same click event is advisable as said by Ivan. You may also want to read this other discussion here on SO about best practices and why it's not always good to disable default right click behaviour (i.e.: it's not always guaranteed to work).

Disable Mouse-wheel to scroll up or down

I have two pages, these are the conditions I cannot achieve, please let me know if it is not possible.
In one page, I need to disable the mouse-wheel to scroll up. So when I scroll up with mouse-wheel nothing happens, but when I scroll down the page scrolls.
In the other page, I want the exact opposite, I need to disable the scrolling down on mouse-wheel. So when I scroll down nothing happens, but when I scroll up the page scrolls.
This is all i really need, but if you think I need to explain more, please let me know, thank you.

This code works for div with id "mydiv". You can change the mydiv to the body or any other element you want. The code works in all browsers.
JS:
var mydiv = document.getElementById("mydiv");
if (mydiv.addEventListener) {
// IE9, Chrome, Safari, Opera
mydiv.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
mydiv.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else
mydiv.attachEvent("onmousewheel", MouseWheelHandler);
function MouseWheelHandler(e) {
// cross-browser wheel delta
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if(delta==1) // if mouse scrolls up
{
alert('up');
}
if(delta==-1) // if mouse scrolls down, we disable scrolling.
{
e.preventDefault();
e.stopPropagation();
return false;
}
return false;
}
NOTE: Remember to set overflow to auto or scroll for this function to work.
A working example: Click Here
Hope this helps.

Case of preventing mouse scroll down (for mouse scroll up just change comparison operator to '<'):
$(window).on("wheel mousewheel", function(e){
if(e.originalEvent.deltaY > 0) {
e.preventDefault();
return;
} else if (e.originalEvent.wheelDeltaY < 0) {
e.preventDefault();
return;
}
});
We need to check for two values because of cross-browser issues.
jsFiddle link
P. S. Warning. Since later versions of Chrome decides to treat all window events as passive by default, the code above won't work in Chrome. Will come with a better solution and update this answer ASAP.

You could try this to disable mouse scroll. I understand this is not as per your question but I believe it could help you.
JS:
function disableMouseScroll() {
return false;
}
document.onmousewheel=disableMouseScroll;
Link