如何区分click+drag与双click+drag

Question

我的项目需要区分单击、双击、click+drag和双click+drag。我现在已经可以区分前三个事件，但是不知道如何检测双click+drag。有什么想法吗？

var holdStarter = null;
var holdDelay = 500;
var holdActive = false;

function onMouseDownEssence() {

  holdStarter = setTimeout(function() {
    holdStarter = null;
    holdActive = true;

    console.log("click and dragging ");

  }, holdDelay);

}


function onMouseUpEssence(el) {
  if (holdStarter) {
    clearTimeout(holdStarter);

    if (el.getAttribute("data-dblclick") == null) {
      el.setAttribute("data-dblclick", 1);
      setTimeout(
        function() {
          if (el.getAttribute("data-dblclick") == 1) {
            console.log("single clicked ");
          }
          el.removeAttribute("data-dblclick");
        }, 300);
    } else {
      el.removeAttribute("data-dblclick");

      console.log("double clicked ");
    }
  } else if (holdActive) {
    console.log("click and drag done");
    holdActive = false;

  }

}

Answer 1

我删除了一个超时，并添加了一个变量dragTarget来跟踪被拖动的元素。

​

var holdStarter = null;
var dblDelay = 300;
var holdDelay = 500;
var holdActive = false;
var dragTarget = null;
var dbl = "data-dblclick";
window.addEventListener('mousedown',function(e){
  dragTarget = e.target;
  holdStarter = new Date().valueOf();
});
window.addEventListener('mouseup',function(e){
  var el = e.target;
  var holdActive = (new Date().valueOf() - holdStarter) > holdDelay;
  if (holdActive) {
    if (el.getAttribute(dbl) == null) {
      console.log("drag done");
    } else {
      console.log("double drag done");
      el.removeAttribute(dbl);
    }
    holdActive = false;
  } else if (el.getAttribute(dbl) == null) {
    el.setAttribute(dbl, 1);
    setTimeout(function() {
      if (el.getAttribute(dbl) == 1 && !dragTarget) {
        console.log("single clicked ");
        el.removeAttribute(dbl);
      }
    }, dblDelay);
  } else {
    console.log("double clicked");
    el.removeAttribute(dbl);
  }
  dragTarget = null;
});

​