1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to differentiate click+drag vs double click+drag

Discussion in 'Programming/Internet' started by typeof programmer, Sep 12, 2018.

  1. 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;

    }

    }

    Login To add answer/comment
     

Share This Page