I really would like to know if there is any way to execute a function when you tap (on mobile device) or click (on desktop device) a form submit/anchor/etc. and hold it for some amount of time WITHOUT using jQuery!

function clicked() {
    //set some kind of timer or so...
}

function toBeExecutedNMillisecondsAfterAnchorWasClicked() {
     //do some stuff...
}

I really would like to know if there is any way to execute a function when you tap (on mobile device) or click (on desktop device) a form submit/anchor/etc. and hold it for some amount of time WITHOUT using jQuery!

function clicked() {
    //set some kind of timer or so...
}

function toBeExecutedNMillisecondsAfterAnchorWasClicked() {
     //do some stuff...
}

• javascript
• html
• css
• mobile
• web

• 2 using setTimeout(function(){...}, intervalInMilliseconds)? – albciff Commented Dec 10, 2014 at 14:02

5 Answers 5

(function() {

  var mouseTimer;
  function mouseDown() { 
      mouseUp();
      mouseTimer = window.setTimeout(execMouseDown,2000); //set timeout to fire in 2 seconds when the user presses mouse button down
  }

  function mouseUp() { 
      if (mouseTimer) window.clearTimeout(mouseTimer);  //cancel timer when mouse button is released
      div.style.backgroundColor = "#FFFFFF";
  }

  function execMouseDown() { 
      div.style.backgroundColor = "#CFCF00";
  }

  var div = document.getElementById("bam");
  div.addEventListener("mousedown", mouseDown);
  document.body.addEventListener("mouseup", mouseUp);  //listen for mouse up event on body, not just the element you originally clicked on
  
}());

#bam { width:100px; height: 100px; border: 1px solid black; }

<div id="bam"> Hold mouse button for 2 seconds. </div>
<p>Bacon</p>
<p>Bacon</p>
<p>Bacon</p>
<p>Bacon</p>
<p>Bacon</p>
<p>Bacon</p>
<p>Bacon</p>
<p>Bacon</p>
<p>Bacon</p>

I would do something like this to get the difference between mousedown and mouseup. Then, I would do an if/else statement with that diff variable that I created.

Here's a fiddle:: http://jsfiddle.net/mgfkdu9x/2/

<button id="element">My Button</button>

(function () {
    var element = document.getElementById('element'),
        start, 
        end;

    element.onmousedown = function () {
      setTimeout(function() { 
          if (element.onmousedown=true)
              toBeExecutedNMillisecondsAfterAnchorWasClicked();
      }, 5000);
    };

})();

function toBeExecutedNMillisecondsAfterAnchorWasClicked() {
     console.log('function start');
}

You can use the setTimeout function:

function clicked() {
  // Execute your function after 2000 milliseconds
  setTimeout(toBeExecutedNMillisecondsAfterAnchorWasClicked, 2000);
}

http://jsfiddle.net/mgfkdu9x/4/

(function() {

  var mouseTimer;
  function mouseDown() { 
      mouseUp();
      mouseTimer = window.setTimeout(execMouseDown,500);
  }

  function mouseUp() { 
      if (mouseTimer) window.clearTimeout(mouseTimer);
      div.style.backgroundColor = "#FFFFFF";
      setTimeout(function(){
          a.setAttribute("href", "google.com");
      },0);
  }

  function execMouseDown() { 
      div.style.backgroundColor = "#CFCF00";
      a.setAttribute("href", "javascript:void();");
  }

  var div = document.getElementById("div");
  var a = document.getElementById("anchor");
  div.addEventListener("mousedown", mouseDown);
  document.body.addEventListener("mouseup", mouseUp);

}());

edited espacarellos code so it works for anchors with href too.

If you don't want to make the default behaviour, you should prevent it and then execute your function after the time you wish to pass.

To keep it simple I would do:

document.getElementById("yourElementId").addEventListener('click', function(event){
    event.preventDefault();
    setTimeout(function(){
        //YOUR CODE GOES HERE
    }, 2000);
});