Kevin Powell - Community•4w ago

Increment number by holding a button with mouse click or screen tap?

Any simple way to do this? 1.Increment needs to stop when cursor or finger leaves the button, or when you are no longer holding it. 2.Only tap or LMB(Left Mouse Button) should activate it. No weird stuff like double click or RMB.

9 Replies

Jochem•4w ago

take a look at the MDN articles for the mousedown and mouseup events https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event you may also need the pointer versions: https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerdown_event https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event

Tok124 (CSS Nerd)•4w ago

Someone asked me for this very recently so i have a pen ready for this https://codepen.io/tok124/pen/wvVzNrL

Tim

CodePen

Untitled

...

DovahOP•4w ago

Damn. Will go through them Neat! Will try using it now @Tok124 (CSS Nerd) It has the same bug as mine where if you double click it it auto starts. xD but I guess I can just limit the whole thing to LMB No double click but click it with both LMB and RMB at the same time

Jochem•4w ago

it's generally a bad idea to rewrite UX conventions. No one will ever think to click something with both mouse buttons without you telling them every single time

DovahOP•4w ago

But what if they do by accident and the counter on the shop goes wild and they pay for 150+ items because they panicked? xD

Jochem•4w ago

just fix the bug, don't come up with crazy schemes to work around it

DovahOP•4w ago

But isn't limiting button to only be clicked by LMB a fix? Why is it crazy?

if(e.button === 0) {}

if(e.button === 0) {}

Oh it still missfires even with that code an goes into infinite count Ok it works with

if(e.button === 2) {return;} else {}

if(e.button === 2) {return;} else {}

Jochem•4w ago

because in 36+ years of using a computer, I've never seen a control that has to be hit with both mouse buttons share your code, cause right now you're asking for a solution to a problem you're not showing us preferably in codepen, somewhere where folks can run it themselves

DovahOP•4w ago

It does not need to be hit with both. But when it is hit with both, it does that. Codepen that person above linked has the same problem Just click + button with both mousebuttons I did say that clearly Ok that should be it, it works fine I think. @Tok124 (CSS Nerd) The

interval = setTimeout(() => {
      interval =   setInterval(action, 100);
    }, 300)

interval = setTimeout(() => {
      interval =   setInterval(action, 100);
    }, 300)

part where you put timeout in interval as well helped a lot since I was not doing it and double click would triger the interval function due to the timeout. xD @Jochem Thanks for help as well. 👍

Gaming

Programming

Increment number by holding a button with mouse click or screen tap?

Did you find this page helpful?