JavaScript с нуля

Одинарный или двойной клик

Начнем с наиболее часто используемого события мыши — клика. Это событие срабатывает, когда вы щелкаете по элементу. Иначе можно сказать, что событие click срабатывает, когда вы используете мышь для нажатия на элемент, а затем отпускаете нажатие, сохраняя курсор на этом элементе.

Ниже — абсолютно бесполезная визуализация сказанного:

Вы уже несколько раз видели код для работы с событием клика, но его никогда не бывает достаточно, поэтому вот вам еще один пример:

let button = document.querySelector("#myButton");

button.addEventListener("click", doSomething, false);

function doSomething(e) {

console.log("Mouse clicked on something!");

}

Прослушивание события click аналогично практически любому другому событию, поэтому не стану утомлять вас подробностями нашей старой знакомой функции addEventListener. Вместо этого утомлю вас подробностями, связанными с событием dblclick.

dblclick срабатывает, когда вы быстро щелкаете мышью дважды. Код для использования этого события будет следующим:

let button = document.querySelector("#myButton");

button.addEventListener("dblclick", doSomething, false);

function doSomething(e) {

console.log("Mouse clicked on something…twice!");

}

Время между кликами, определяющее срабатывание события dblclick, заложено в ОС, где происходит выполнение кода. Оно не зависит от браузера и не определяется (не считывается) пользователем с помощью JavaScript.

НЕ ПЕРЕГРУЖАЙТЕ

Если вдруг случится прослушивать и событие click, и событие dblclick для элемента, обработчики событий будут вызваны три раза при двойном щелчке. Вы получите два события щелчка, которые будут соответствовать каждому щелчку. После второго щелчка вы также получите событие dblclick.