用JavaScript举行活动

Question

我真的很想知道当您点击（在移动设备上）或单击（在桌面设备上）表单提交/锚定等时，是否可以执行某项功能。 并在不使用jQuery的情况下将其保留一段时间！

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

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

Answer 1

我会做这样的事情来获取mousedown和mouseup之间的区别。 然后，我将对我创建的diff变量执行if / else语句。

这是一个小提琴：： 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');
}

Answer 2

您可以使用setTimeout函数：

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

Answer 3

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

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

}());

编辑了espacarellos代码，因此它也适用于带有href的锚点。

Answer 5

如果您不想执行默认行为，则应避免使用默认行为，然后在希望经过的时间后执行功能。

为简单起见，我将执行以下操作：

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