Как сделать так, чтобы при событии dblclick событие click игнорировалось бы?

Question

Я установил для одного элемента два обработчика события для click и dblclick.

Например,

document.querySelector("div").addEventListener("dblclick", function () { console.log("Bye"); }, false);
document.querySelector("div").addEventListener("click", function () { console.log("Hi"); }, false);

Однако при двойном нажатии мышки в IE-11 тем не менее событие click два раза перехватывается.

То есть получается

Hi
Hi
Bye

Как сделать так, чтобы при возникновении события dblclick событие click игнорировалось бы?

Answer 1

Простыми средствами - никак.
Проблема в том, что обработка кликов идет по порядку. Сначала click, потом dblclick, и надо, чтобы каким-то образом система предугадывала будет ли второй клик или нет. А она этого не может.

Как мне кажется, единственный вариант, это

• поставить delay на обработке click. Эта задержка даст возможность системе "дождаться" второго нажатия. Если второго нажатия не будет - пройдет событие одиночного клика.
• сделать обработку dblclick, которая бы отменяла функцию одиночного клика и запускала свою

Ну а если организовать JS функцию на общий клик, то все в одну согнать можно. Что-то типа такого:

var waitingForClick = false;

function theClick(ev) {
    switch (ev.detail) {
    case 1: // первый клик
        waitingForClick = setTimeout(function() {
            console.log("Hi"); 
        }, 500);
        break;
    default: // больше чем один клик
        if (waitingForClick) { // отменить ждущий клик
            clearTimeout(waitingForClick);
            waitingForClick = false;
        }
        console.log("Bye");
        break;
    }
}

document.querySelector("div").addEventListener('click', theClick, false);