CODEWITHSUNDEEP
javascript
typeof programmer
typeof programmer

Reputation: 1609

How to differentiate click+drag vs double click+drag

My project needs to differentiate single click, double click, click+drag, and double click+drag. I can already differentiate the first 3 events now, but no idea how to detect double click+drag. Any idea?

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;

  }

}

Upvotes: 2

Views: 216

Answers (1)

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

I removed one timeout and added a variable dragTarget to keep track of the dragged element. 

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

Upvotes: 2

Related Questions