Hold event with javascript

问题

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

回答1:

(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>

回答2:

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

回答3:

You can use the setTimeout function:

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

回答4:

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.

回答5:

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

来源：https://stackoverflow.com/questions/27402897/hold-event-with-javascript

标签

javascript

html

css

mobile

web