MouseEvent

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

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

Интерфейс MouseEvent представляет события, возникающие в результате взаимодействия пользователя с указательным устройством (например, мышью). К распространённым событиям, использующим этот интерфейс, относятся click, dblclick, mouseup, mousedown.

MouseEvent наследуется от UIEvent, который, в свою очередь, наследуется от Event. Хотя метод MouseEvent.initMouseEvent() сохраняется для обратной совместимости, создание объекта MouseEvent следует производить с помощью конструктора MouseEvent().

Несколько более специфичных событий основаны на MouseEvent, включая WheelEvent, DragEvent и PointerEvent.

Конструктор

MouseEvent(): Создаёт объект MouseEvent.

Статические свойства

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN Нестандартное Только для чтения: Минимальная сила, необходимая для нормального клика.
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN Нестандартное Только для чтения: Минимальная сила, необходимая для клика с силой.

Свойства экземпляра

Этот интерфейс также наследует свойства своих родителей, 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.

Методы экземпляра

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

MouseEvent.getModifierState(): Возвращает текущее состояние указанной клавиши модификатора. Подробнее см. KeyboardEvent.getModifierState().
MouseEvent.initMouseEvent() Устаревший: Инициализирует значение созданного объекта MouseEvent. Если событие уже было отправлено, этот метод ничего не делает.

Пример

Этот пример демонстрирует имитацию нажатия (программное создание события нажатия) на флажок с помощью методов DOM. Состояние события (отменено или нет) затем определяется возвращаемым значением метода EventTarget.dispatchEvent().

HTML

<p>
  <label><input type="checkbox" id="checkbox" /> Checked</label>
</p>
<p>
  <button id="button">Click me to send a MouseEvent to the checkbox</button>
</p>

JavaScript

function simulateClick() {
  // Get the element to send a click event
  const cb = document.getElementById("checkbox");

  // Create a synthetic click MouseEvent
  let evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });

  // Send the event to the checkbox element
  cb.dispatchEvent(evt);
}
document.getElementById("button").addEventListener("click", simulateClick);

Результат

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

Спецификация
События пользовательского интерфейса # interface-mouseevent
Модуль CSSOM View # extensions-to-the-mouseevent-interface
Pointer Lock 2.0 # extensions-to-the-mouseevent-interface

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

	Настольный					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`MouseEvent`	26	12	11	15	7	26	14	14	7	1.5	4.4
`MouseEvent`	1	12	1	10.6	1	18	4	11	1	1.0	4.4
`altKey`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`button`	1	12	1	10.6	1	18	4	11	1	1.0	≤37
`buttons`	43	12	15 Restrictions apply depending on OS.	30	11.1	43	15	30	11.3	4.0	43
`clientX`	1	12	1	10.6	1	18	4	11	1	1.0	≤37
`clientY`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`ctrlKey`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`getModifierState`	47	12	15	34	12.1	47	15	34	12.2	5.0	47
`initMouseEvent`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`layerX`	1	12	1	15	1	18	4	14	1	1.0	4.4
`layerY`	1	12	1	15	1	18	4	14	1	1.0	4.4
`metaKey`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`movementX`	3722–37	13	411–41	2415–24	96–8	3725–37	414–41	2414–24	86–8	3.01.0–3.0	374.4–37
`movementY`	3722–37	13	411–41	2415–24	96–8	3725–37	414–41	2414–24	86–8	3.01.0–3.0	374.4–37
`offsetX`	1	12	39	≤12.1	1	18	43	≤12.1	1	1.0	≤37
`offsetY`	1	12	39	≤12.1	1	18	43	≤12.1	1	1.0	≤37
`pageX`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`pageY`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`relatedTarget`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`screenX`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`screenY`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`shiftKey`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`x`	1	12	53	≤12.1	3.1	18	53	≤12.1	2	1.0	≤37
`y`	1	12	53	≤12.1	3.1	18	53	≤12.1	2	1.0	≤37

См. также

Его непосредственный родитель, UIEvent
PointerEvent: Для расширенных событий указателя, включая много касаний

© 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/MouseEvent