Javascript if detect hold to run in for loop

Question

I've been figuring out how to detect if it's a longclick on a HTML Button. Currently it's just moving pixel by pixel snap

Is there a way to detect hold on a button and run it in a forloop? I've tried onlongclick and there's no luck in it .

function load() {
   var context = document.getElementById('main').getContext("2d");
   var left = document.getElementById('left');
   var down = document.getElementById('down');
   var right = document.getElementById('right');
   var imgLoaded = false;
   var posX = 250;
   var posY = 0;
   var snap = 10;


   var img = new Image();
   img.onload = function() {
      imgLoaded = true;
      context.drawImage(img, posX, posY);
   };
   img.src = "start.png";

   // left button click
   left.onclick = function() {
      if (!imgLoaded) return;
      posX = posX - snap;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.drawImage(img, posX, posY);
   };

   // down button click
   down.onclick = function() {
      if (!imgLoaded) return;
      posY = posY + snap;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.drawImage(img, posX, posY);
   };

   // right button click
   right.onclick = function() {
      if (!imgLoaded) return;
      posX = posX + snap;
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      context.drawImage(img, posX, posY);
   };

}

The HTML Buttons:-

<aside class="socialNetworkNavBar">
            <div id="left" style="margin-right: 50px;" class="socialNetworkNav">
                <!-- Add a Anchor tag with nested img tag here -->
                <input type="image" src="images/left.png">

            </div>
            <div id="down" style="margin-right: 50px;" class="socialNetworkNav">
                <!-- Add a Anchor tag with nested img tag here -->
                <input type="image" src="images/down.png"> </div>
            <div id="right" style="margin-right: 50px;" class="socialNetworkNav">
                <!-- Add a Anchor tag with nested img tag here -->
                <input type="image" src="images/UXwr4.png">
            </div>

        </aside>

score 3 · Accepted Answer · answered Jun 28 '17 at 04:56

click is an event, where the mouse has pressed and released the button. If you want to detect whether that was a long click, you might add a mousedown listener, and store the time that the button was pressed:

left.onmousedown = function() {
    left.dataset.start = new Date().getTime();
};

left.onclick = function() {
    var diff = new Date() - parseInt(left.dataset.start);
    if(diff / 1000 > 3) {
       // Mouse-down was more than three seconds ago, this was a long click
    }
};

If you want to continuously perform an action while a button is still pressed, you could run that action as an interval, that is interrupted when the button is released:

left.onmousedown = function() {
   left.dataset.interval = window.setInterval(function() {
      // perform action
   }, 250);
};

left.onmouseup = function() {
   window.clearInterval(parseInt(left.dataset.interval));
};

left.onmouseout = function() {
   window.clearInterval(parseInt(left.dataset.interval));
};

This is interesting, so i could bind an event to a button based on onmousedown is it? — FreedomPride, Jun 28 '17 at 05:01
Well yes, but it will only fire once, when the button is pressed. If you want it to fire continuously for the duration of that press, you should start an interval. — David Hedlund, Jun 28 '17 at 05:04
This is a very legit way to fix it without using DOM property. Honestly speaking i thought it's impossible, but with an interval method. It's good. — FreedomPride, Jun 28 '17 at 05:08

shawon191 · Answer 2 · 2017-06-28T04:58:13.800

2

I think you are looking for onmousedown event. Which runs when a key a pressed down. You do need to set up a onmouseup event too to define what happens after the key is released.

https://www.w3schools.com/jsref/event_onmousedown.asp

edited Jun 28 '17 at 04:58

answered Jun 28 '17 at 04:53

shawon191

1,945
13
28

It's button not key. I'm using a button but how would i detect it in a input button? – FreedomPride Jun 28 '17 at 04:54
@FreedomPride Then you can use `onmousedown` and `onmouseup` events bound to the button. See this demo https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousedown – shawon191 Jun 28 '17 at 04:57
1

Note that `onmousedown` fires once, when the button is pressed, as opposed to `onkeydown` from the original answer, which fires repeatedly while the key is pressed. It looks like OP is trying to move an object while a button is held down, which `onkeydown` would handle on its own, but `onmousedown` doesn't. – David Hedlund Jun 28 '17 at 05:02

score 1 · Answer 3 · answered Jun 28 '17 at 05:01

A generic UI will detect Clicks (onClick), Double-Clicks (onDoubleClick), Drags&Drop (OnDrag).

Otherwise, you can manually manage long clicks with onMouseDown and onMouseUp.

JQuery can provide an automated event on mobile with onTapHold: https://api.jquerymobile.com/taphold/

There is a similar answer here: Long Press in JavaScript?

About what you said, "run it in a forloop", you can't do that in Javascript since it is not asynchronous. A forloop would prevent the interface from displaying your modifications. You can use a timer to trigger your event and handle whatever you are trying to achieve.

Javascript if detect hold to run in for loop

3 Answers3