коллеги!
Есть задача: необходимо при нажатии по колесику мышки на ссылке сделать так, чтобы не открывалась новая вкладка и вообще ничего не происходило. Перепробовал разные варианты.
Пробовал вот такой вариант:
function middleClick(e) {
if (e.which == 2) {
e.preventDefault();
open('').close();
return false;
}
return true;
}
document.addEventListener('mousedown', middleClick);
В таком случае, при нажатии на интересующую меня кнопку открывается и сразу закрывается вкладка. К сожалению, такой вариант не подходит, поскольку отлавливает само нажатие по колесику мыши, а не нажатие колеса мыши на ссылке, и в браузере появляется сообщение "Всплывающее окно заблокировано", а это, увы, недопустимо.
UPD: Решение найдено. Естественно, с Вашей помощью. Оставляю скрипт, который отменяет открытие вкладки по клике колесом мыши на ссылку, здесь (на всякий случай, может кому пригодится):
var ourLinks = document.querySelectorAll('a');
for (i = 0; i < ourLinks.length; i++) {
ourLinks[i].addEventListener('auxclick', (e) => {
if (e.button === 1) {
e.preventDefault();
}
});
}
Есть событие auxclick, которое срабатывает при клике на неосновную кнопку мыши, то есть обычно это скрол и правая кнопка, правда поддержка браузерами у него не на самом высоком уровне - https://caniuse.com/#feat=auxclick
const link = document.querySelector('a');
link.addEventListener('auxclick', (e) => {
if (e.button === 1) {
e.preventDefault();
}
});
<a href="#">link</a>
Есть более кроссбраузерный способ: при нажатом колесе запрещать события мыши на ссылках и разрешать обратно, когда кнопка отпущена при помощи св-ва pointer-events, которое работает во всех популярных браузерах. Только вешать тогда события нужно на родителя, т.к. если повесить на саму ссылку, то после установки для ссылки pointer-events: none, событие mouseup на ней уже не сработает и ссылка останется некликабельной.
const link = document.querySelector('a');
document.addEventListener('mousedown', (e) => {
if (e.button === 1) {
link.style.pointerEvents = 'none';
}
});
document.addEventListener('mouseup', (e) => {
if (e.button === 1) {
link.style.pointerEvents = 'unset';
}
});
<a href="#">link</a>
Продвижение своими сайтами как стратегия роста и независимости