Question

在JavaScript mousedown事件后跟mouseup和click。所以在点击事件中，此事件的三个执行。但在我的任务中，我想为mousedown和click执行不同的任务。如果有人按住鼠标一段时间，则会显示一个列表，并且不会执行click事件。只需单击，即可执行单击任务。它就像chrome后箭头功能一样。有人帮忙。提前谢谢。

Answer 1

你可以这样做：

var pressTimer, longClick;

function mouseUpCheck() {
  clearTimeout(pressTimer);
  window.removeEventListener('mouseup', mouseUpCheck);   
}

document.querySelector('.link').addEventListener('mousedown', function(){
  window.addEventListener('mouseup', mouseUpCheck);
  pressTimer = window.setTimeout(function() { longClick = true; alert('long click'); },2000);
});

document.querySelector('.link').addEventListener('click', function() {
  if (longClick) {
    event.stopPropagation();
    event.preventDefault();
    longClick = false;
    return;
  }

  alert('click');
});

<a class="link">click me</a>

Answer 2

Mousedown不会为down生成多个事件，所以我在这里使用了setInterval来检查鼠标是否仍然按下。

刚刚完成了一个快速模式，忘记了如果鼠标移出元素，元素上的鼠标就不会被触发。所以我在这里将事件附加到窗口。

var d = document.querySelector('div');
var dtime;
var i;


d.onmousedown = function () {
  window.addEventListener('mouseup', mouseUpCheck);
  dtime = new Date();
  i = setInterval(function () {
    if (dtime) {
      var t = new Date();
      if (t.getTime() - dtime.getTime() >= 2000) {
        dtime = null; //stop now..
        console.log('2 second mousedown');
      }
    }
  }, 50);
}
function mouseUpCheck() {
  dtime = null;
  window.removeEventListener('mouseup', mouseUpCheck);   
  clearInterval(i);
}

<div>Click Hold for 2 seconds</div>

Answer 3

对于在同一选择器中工作的两个事件：

var pressTimer, longClick;

function mouseUpCheck() {
  clearTimeout(pressTimer);
  window.removeEventListener('mouseup', mouseUpCheck);   
}

document.querySelector('.mySelector').addEventListener('mousedown', function(){
  window.addEventListener('mouseup', mouseUpCheck);
  pressTimer = window.setTimeout(function() {
  longClick = true; 
  //code for longclick
  },2000);
});

document.querySelector('.mySelector').addEventListener('click', function(event) {
  if (longClick) {
    longClick = false;
    event.stopPropagation();
    event.preventDefault();

    return;
  }

  // code for simple click
});

想要在mousedown和click事件上执行不同的任务

3 个答案: