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

#javascript #события

Я установил для одного элемента два обработчика события для 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 игнорировалось бы?
    

Ответы

Ответ 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);