Отменить действие при нажатии колеса мышки на ссылку

130
27 марта 2021, 10:00

коллеги!

Есть задача: необходимо при нажатии по колесику мышки на ссылке сделать так, чтобы не открывалась новая вкладка и вообще ничего не происходило. Перепробовал разные варианты.

Пробовал вот такой вариант:

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();
  }
});
}
Answer 1

Есть событие 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>

READ ALSO
Помогите разобраться в выводе

Помогите разобраться в выводе

Дорогие программисты,есть маленький кусок кода,который я,к сожалению,не понял,а именно : почему на выходе получается function, в коде нет метода...

157
Как сохранить таблицу html

Как сохранить таблицу html

Сделал таблицу в html (Имя,код паспорта,номер телефона, сумма, "не погашено/погашено") Суть такова что надо чтоб при нажатие на имя вылезало окошко,...

233
Двойной клик при использовании .click в JQuery

Двойной клик при использовании .click в JQuery

Есть элемент label с классом radioContainer, при клике на него должен раскрываться список selectmenu с классом meal, дело в том, что при клике происходить двойное...

158