auxclick появится в Chrome 55

Jeff Posnick

Когда щелчок не является click ? Для веб-разработчика, работающего над сложным пользовательским интерфейсом, это не абстрактный философский вопрос. Если вы реализуете пользовательское поведение ввода с помощью мыши, очень важно учитывать намерения пользователя. Например, если пользователь нажимает на ссылку средней кнопкой мыши, то разумно предположить, что он хочет открыть новую вкладку с содержимым этой ссылки. Если пользователь нажимает средней кнопкой мыши на случайный элемент пользовательского интерфейса, вы можете предположить, что это было случайно, и игнорировать этот ввод, в то время как ожидается, что нажатие основной кнопки вызовет ответ пользовательского интерфейса.

Можно, хотя и немного громоздко, смоделировать эти нюансы взаимодействия с помощью прослушивателя событий одним click . Вам придется явно проверить свойство button объекта MouseEvent , чтобы увидеть, установлено ли для него значение 0 , представляющее основную кнопку, или что-либо еще, где 1 обычно представляет среднюю кнопку и так далее. Но не многие разработчики доходят до явной проверки свойства button , что приводит к коду, который обрабатывает все click одинаково, независимо от того, какая кнопка была нажата.

Начиная с Chrome 55, новый тип MouseEvent , называемый auxclick , запускается в ответ на любые щелчки, сделанные с помощью неосновной кнопки. Это новое событие сопровождается соответствующим изменением в поведении события click : оно срабатывает только при нажатии основной кнопки мыши. Мы надеемся, что эти изменения облегчат веб-разработчикам написание обработчиков событий, реагирующих только на тот тип кликов, который им важен, без необходимости специальной проверки свойства MouseEvent.button .

Уменьшите ложные срабатывания

Как уже упоминалось, одной из причин создания auxclick было желание избежать развертывания пользовательских обработчиков click , которые ошибочно переопределяют поведение «средний щелчок открывает вкладку». Например, представьте, что вы написали обработчик событий click , который использует API истории для перезаписи строки адреса и реализации настраиваемой одностраничной навигации. Это может выглядеть примерно так:

document.querySelector('#my-link').addEventListener('click', event => {
    event.preventDefault();
    // ...call history.pushState(), use client-side rendering, etc....
});

Ваша пользовательская логика может работать так, как задумано, когда она запускается основной кнопкой мыши, но если этот код запускается при нажатии средней кнопки, это фактически ложное срабатывание. До появления нового поведения вы в конечном итоге предотвратите действие по умолчанию по открытию новой вкладки, что противоречит ожиданиям вашего пользователя. Хотя вы можете явно проверить наличие event.button === 0 в начале вашего обработчика и выполнять код только в этом случае, об этом легко забыть или никогда не осознавать, что это необходимо.

Запускайте только тот код, который вам нужен

Обратной стороной меньшего количества ложных срабатываний является то, что обратные вызовы auxclick будут выполняться только тогда, когда на самом деле нажата неосновная кнопка мыши. Если у вас есть код, которому необходимо, например, вычислить соответствующий целевой URL-адрес перед открытием новой вкладки, вы можете прослушать auxclick и включить эту логику в свой обратный вызов. Он не повлечет за собой накладные расходы, связанные с запуском при нажатии основной кнопки мыши.

Поддержка и совместимость браузера

В настоящее время это новое поведение реализовано только в Chrome 55. Как упоминалось в первоначальном предложении , приветствуются отзывы (как положительные, так и отрицательные) от сообщества веб-разработчиков. Сообщение о проблеме на GitHub — лучший способ поделиться отзывами с людьми, которые работают над процессом стандартизации.

В то же время разработчикам не нужно ждать, пока auxclick станет широко доступен, чтобы следовать некоторым рекомендациям по обработке событий мыши. Если вы потратите время на проверку значения свойства MouseEvent.button в начале обработчика событий click , вы можете быть уверены, что предпримете соответствующие действия. Следующий шаблон будет обрабатывать основные и вспомогательные щелчки по-разному, независимо от того, имеется ли встроенная поддержка auxclick :

function handlePrimaryClick(event) {
    // ...code to handle the primary button click...
}

function handleAuxClick(event) {
    // ...code to handle the auxiliary button click….
}

document.querySelector('#my-link').addEventListener('click', event => {
    if (event.button === 0) {
    return handlePrimaryClick(event);
    }


    // This provides fallback behavior in browsers without auxclick.
    return handleAuxClick(event);
});

// Explicitly listen for auxclick in browsers that support it.
document.querySelector('#my-link').addEventListener('auxclick', handleAuxClick);