Как сделать что бы при клике(onclick) колёсиком мышки клик срабатывал?

Question

[Андрей Фролов]

Как сделать что бы при клике по элементу element.onclick клик срабатывал не только по нажатию левой клавиши мышки, но и при клике на колёсико.
А то если есть полоса скроллинга в окне браузера, то клик колёсиком по элементу не даёт желаемый эффект. Если полосы скроллинга нет, то всё ок.

Answer 1

[Markus Kelvin]

Клик колесика можно отслеживать по MouseEvent.which
и это значение для колесика - 2.
Например так

$("#text").on('click', function(e) { 
    // данное событие будет выполняться при клике на левую кнопку или на клик колесика
   if( e.which == 1 || e.which == 2 ) {
     // какое нибудь действие 
   }
});

Comments

[Андрей Фролов]

а если без jquery

Answer 2

[amatory10]

без jquery:

(function() {
  document.getElementById('text').addEventListener('mousedown', addClickListener);
  function addClickListener(event) {
    if(event.button == 2) return;
    event.preventDefault();
    alert(event.button);
  }
})()

Comments

[Андрей Фролов]

похоже при возможности скроллинга средняя клавиша всегда выполняет другую функцию, ибо event.button при клике средней клавишей впринципе нет

[amatory10]

Дмитрий Бородин: не очень понимаю чего вы хотите добиться?

[Андрей Фролов]

amatory10: что бы при клике средней клавишей по какому-то блоку на странице срабатывало действе. ну например alert

[amatory10]

Дмитрий Бородин: а разве код выше не позволяет это сделать?

[Андрей Фролов]

amatory10: нет. если на странице есть полоса скроллинга

[amatory10]

Дмитрий Бородин: тоесть совершенно никакой реакции? непонимаю о каком скролинге или элементе идет речь, но все должно работать, и при скролинге и без.

[Андрей Фролов]

amatory10: понял небольшой косяк) я делал выборку нескольких элементов(хз как они по научному :) ). к примеру document.querySelectorAll('span')

[amatory10]

Дмитрий Бородин: если вы предоставите код например на: plnkr.co/edit/?p=preview будет намного яснее в чем проблема.

[Андрей Фролов]

plnkr.co/edit/OYlIBxcGpfYdUGrGx6eQ?p=preview
ну примерно вот так.средняя клавиша не сработает, но если оставить парочку span(то есть убрать полосу прокрутки) то всё ок

[amatory10]

Дмитрий Бородин: у вас какой браузер?

[Андрей Фролов]

amatory10: хром

[amatory10]

Дмитрий Бородин: тогда ничего не понимаю в вашем примере и с полосой и без все отлично работает.

[amatory10]

Дмитрий Бородин: ну или попробуйте использовать 'mouseup' вместо 'click'

[Андрей Фролов]

amatory10: не знаю. у меня при клике появляется перекрестие для быстрой прокрутки

[Андрей Фролов]

amatory10: сработало.причём с таким же появлением фигни для быстрого скроллинга.

[amatory10]

Дмитрий Бородин: вы про 'mouseup'?

[Андрей Фролов]

amatory10: да. странно почему клик не работает.причём в разных браузерах

[amatory10]

Дмитрий Бородин: да с кликом есть проблемы например: firefox знать не знает что такое средняя кнопка мыши, но с mouseup все впорядке.

[Андрей Фролов]

amatory10: у меня установлен древний 15 firefox, mouseup на среднюю клавишу при скроллинге не произошёл

[amatory10]

Дмитрий Бородин: почему даже в этой версии поддерживается 'mouseup'

[amatory10]

Дмитрий Бородин: короче я обновил решение оно должно лучше подойти.

Answer 3

[Виталий Инчин ☢]

Не дает желаемый эффект потому, что вы не отменяете дефолтное действие браузера.

Element.onclick = function(e){
   if("which" in e ? e.which & 2 : e.button & 4){
       e.preventDefault();
       alert("Нажата средняя клавиша мыши.");
   }
}