Элемент: событие dblclick

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Событие dblclick срабатывает, когда кнопка указательного устройства (например, основная кнопка мыши) дважды быстро нажимается на одном элементе в очень короткий промежуток времени.

dblclick срабатывает после двух событий click (и, как следствие, после двух пар событий mousedown и mouseup).

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика события.

addEventListener("dblclick", (event) => {});

ondblclick = (event) => {};

Тип события

Объект MouseEvent. Наследует от UIEvent и Event.

Свойства события

Этот интерфейс также наследует свойства своих родительских интерфейсов, UIEvent и Event.

MouseEvent.altKey Только для чтения: Возвращает true , если клавиша alt была нажата во время срабатывания события мыши.
MouseEvent.button Только для чтения: Номер нажатой кнопки (если применимо) во время срабатывания события мыши.
MouseEvent.buttons Только для чтения: Кнопки, которые были нажаты (если какие-либо) во время срабатывания события мыши.
MouseEvent.clientX Только для чтения: Координата X указателя мыши в координатах области просмотра.
MouseEvent.clientY Только для чтения: Координата Y указателя мыши в координатах области просмотра.
MouseEvent.ctrlKey Только для чтения: Возвращает true , если клавиша control была нажата во время срабатывания события мыши.
MouseEvent.layerX Нестандартный Только для чтения: Возвращает горизонтальную координату события относительно текущего слоя.
MouseEvent.layerY Нестандартный Только для чтения: Возвращает вертикальную координату события относительно текущего слоя.
MouseEvent.metaKey Только для чтения: Возвращает true , если клавиша meta была нажата во время срабатывания события мыши.
MouseEvent.movementX Только для чтения: Координата X указателя мыши относительно положения последнего события mousemove.
MouseEvent.movementY Только для чтения: Координата Y указателя мыши относительно положения последнего события mousemove.
MouseEvent.offsetX Только для чтения: Координата X указателя мыши относительно позиции поля ввода целевого узла.
MouseEvent.offsetY Только для чтения: Координата Y указателя мыши относительно позиции поля ввода целевого узла.
MouseEvent.pageX Только для чтения: Координата X указателя мыши относительно всего документа.
MouseEvent.pageY Только для чтения: Координата Y указателя мыши относительно всего документа.
MouseEvent.relatedTarget Только для чтения: Вторичная цель события, если она есть.
MouseEvent.screenX Только для чтения: Координата X указателя мыши в координатах экрана.
MouseEvent.screenY Только для чтения: Координата Y указателя мыши в координатах экрана.
MouseEvent.shiftKey Только для чтения: Возвращает true , если клавиша shift была нажата во время срабатывания события мыши.
MouseEvent.mozInputSource Нестандартный Только для чтения: Тип устройства, которое сгенерировало событие (одно из MOZ_SOURCE_* констант). Это позволяет, например, определить, было ли событие мыши сгенерировано фактической мышью или событием касания (что может повлиять на точность интерпретации координат, связанных с событием).
MouseEvent.webkitForce Нестандартный Только для чтения: Степень нажатия при щелчке.
MouseEvent.x Только для чтения: Псевдоним для MouseEvent.clientX.
MouseEvent.y Только для чтения: Псевдоним для MouseEvent.clientY.

Примеры

В этом примере размер карточки изменяется при двойном щелчке по ней.

JavaScript

const card = document.querySelector("aside");

card.addEventListener("dblclick", (e) => {
  card.classList.toggle("large");
});

HTML

<aside>
  <h3>My Card</h3>
  <p>Double click to resize this object.</p>
</aside>

CSS

aside {
  background: #fe9;
  border-radius: 1em;
  display: inline-block;
  padding: 1em;
  transform: scale(0.9);
  transform-origin: 0 0;
  transition: transform 0.6s;
  user-select: none;
}

.large {
  transform: scale(1.3);
}

Результат

Спецификации

Спецификация
UI Events # event-type-dblclick
HTML # handler-ondblclick

Совместимость браузеров

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в IOS	Samsung Internet	WebView Android
`dblclick_event`	1	12	6 Начиная с Firefox 68, `dblclick` события отправляются только для основной кнопки мыши, в соответствии со спецификацией.	11.6	3	18	6	12.1	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event