Javascript, щелкните, дважды щелкните и перетащите в том же элементе

Question

Мне нужна функция, которая вычисляет, если пользователь нажимает, двойным щелчком мыши или перетаскиванием мыши.

Поскольку все это происходит на одном холсте с использованием обычных событий, это не работает. Я нашел это через Google:

Нежелательно связывать обработчики как мыши и DblClick события для того же элемента. Последовательность инициируемых событий варьируется от от браузера до браузера, причем некоторые из них получают два события click и других пользователей. Если интерфейс, который реагирует по-разному на один- , и двойных щелчков не удается избежать, то событие dblclick должно быть , смоделированное в обработчике кликов. Мы можем добиться этого, сохранив отметку времени в обработчике, а затем сравнив текущее время с сохраненной временной отметкой при последующих кликах. Если разница небольшая , мы можем обработать клик как двойной щелчок.

Как я мог добиться этого в хорошем смысле?

Сначала проверьте, нажат ли щелчок (для перетаскивания)? Когда он выпущен, рассматривайте его как щелчок? а затем, если щелкнуть дважды, нажмите дважды?

Как это перевести на код? Помогите оценить.

Answer 1

Что-то вроде следующего должны заставить вас начать, я использую JQuery просто, чтобы сделать его проще показать, это может быть реализовано с прямым JS, это просто много шума

$(function() { 

    var doubleClickThreshold = 50; //ms 
    var lastClick = 0; 
    var isDragging = false; 
    var isDoubleClick = false; 

    $node = ("#mycanvas"); 
    $node.click(function(){ 
    var thisClick = new Date().getTime(); 
    var isDoubleClick = thisClick - lastClick < doubleClickThreshold; 
    lastClick = thisClick; 
    }); 

    $node.mousedown(function() { 
    mouseIsDown = true; 
    }); 

    $node.mouseUp(function() { 
    isDragging = false; 
    mouseIsDown = false; 
    }); 

    // Using document so you can drag outside of the canvas, use $node 
    // if you cannot drag outside of the canvas 
    $(document).mousemove(function() { 
    if (mouseIsDown) { 
     isDragging = true; 
    } 
    }); 
}); 

Answer 2

Я бы, вероятно, обойдусь этим, поставив таймер в событие click, чтобы проверить другой щелчок.

time = 0 
if(new Date().getTime() < time + 400) { 
    // Double click 
    throw new Error("Stop execution"); 
} 
if(!!time) 
    throw new Error("Stop execution"); 
time = new Date().getTime(); 
// Single click 

Нечто подобное. Непроверенный, и я не могу сейчас думать по какой-то странной причине.