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

Событие auxclick срабатывает в Element, когда кнопка неглавного указателя (любая кнопка мыши, кроме главной — обычно левая) нажата и отпущена в рамках одного и того же элемента.

auxclick срабатывает после событий mousedown и mouseup в указанном порядке.

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

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

onauxclick = (event) => {};

Тип PointerEvent. Наследует от MouseEvent.

Этот интерфейс наследует свойства от MouseEvent и Event.

PointerEvent.altitudeAngle Только для чтения Экспериментальная

Представляет угол между осью датчика (указателя или стилуса) и плоскостью X-Y экрана устройства.

PointerEvent.azimuthAngle Только для чтения Экспериментальная

Представляет угол между плоскостью Y-Z и плоскостью, содержащей ось датчика (указателя или стилуса) и ось Y.

PointerEvent.pointerId Только для чтения

Уникальный идентификатор указателя, вызвавшего событие.

PointerEvent.width Только для чтения

Ширина (величина по оси X) в пикселях CSS геометрии контакта указателя.

PointerEvent.height Только для чтения

Высота (величина по оси Y) в пикселях CSS геометрии контакта указателя.

PointerEvent.pressure Только для чтения

Нормализованное давление ввода указателя в диапазоне 0 до 1, где 0 и 1 представляют минимальное и максимальное давление, которое может обнаружить оборудование, соответственно.

PointerEvent.tangentialPressure Только для чтения

Нормализованное касательное давление ввода указателя (также известное как боковое давление или напряжение цилиндра) в диапазоне -1 до 1, где 0 — нейтральное положение управления.

PointerEvent.tiltX Только для чтения

Угол плоскости (в градусах, в диапазоне от -90 до 90) между плоскостью Y-Z и плоскостью, содержащей ось указателя (например, пера-стилуса) и ось Y.

PointerEvent.tiltY Только для чтения

Угол плоскости (в градусах, в диапазоне от -90 до 90) между плоскостью X-Z и плоскостью, содержащей ось указателя (например, пера-стилуса) и ось X.

PointerEvent.twist Только для чтения

Повороты указателя (например, пера-стилуса) по часовой стрелке вокруг его главной оси в градусах, со значением в диапазоне от 0 до 359.

PointerEvent.pointerType Только для чтения

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

PointerEvent.isPrimary Только для чтения

Указывает, представляет ли указатель основной указатель данного типа указателя.

В подавляющем большинстве браузеров, которые сопоставляют средний клик с открытием ссылки в новой вкладке, включая Firefox, можно отменить это поведение, вызвав preventDefault() внутри обработчика события auxclick.

При прослушивании событий auxclick, исходящих от элементов, которые не поддерживают ввод или навигацию, вы часто захотите явно предотвратить другие стандартные действия, сопоставленные с нажатием средней кнопки мыши. В Windows это обычно автопрокрутка, а в macOS и Linux — обычно вставка из буфера обмена. Это можно сделать, предотвратив стандартное поведение события mousedown или pointerdown.

Кроме того, вам может потребоваться предотвратить открытие системного контекстного меню после правого клика. Из-за различий во времени работы на разных операционных системах это также не является стандартным действием, которое можно предотвратить в событии auxclick. Вместо этого это можно сделать, предотвратив стандартное поведение события contextmenu.

В этом примере мы определяем функции для двух обработчиков событий — onclick и onauxclick. Первый изменяет цвет фона кнопки, а второй — цвет текста кнопки. Вы также можете увидеть две функции в действии, попробовав демонстрацию с многокнопочной мышью (посмотреть в GitHub; также посмотреть исходный код).

let button = document.querySelector("button");
let html = document.querySelector("html");

function random(number) {
  return Math.floor(Math.random() * number);
}

function randomColor() {
  return `rgb(${random(255)} ${random(255)} ${random(255)})`;
}

button.onclick = () => {
  button.style.backgroundColor = randomColor();
};

button.onauxclick = (e) => {
  e.preventDefault();
  button.style.color = randomColor();
};

button.oncontextmenu = (e) => {
  e.preventDefault();
};

Обратите внимание, что помимо захвата события auxclick с помощью onauxclick, также захватывается событие contextmenu и вызывается preventDefault() для этого события, чтобы предотвратить появление контекстного меню после применения изменения цвета.

• Урок: Введение в события
• click
• contextmenu
• dblclick
• mousedown
• mouseup
• pointerdown
• pointerup