Запуск события onclick с использованием среднего щелчка

Я использую событие onclick хешированной ссылки, чтобы открыть <div> как всплывающее окно. Но средний клик не вызывает событие onclick, но принимает только значение атрибута href ссылки и загружает URL-адрес на новой странице. Как использовать средний клик, чтобы открыть <div> как всплывающее окно?

Ответ 1

Ответ нищего правильный, но похоже, что вы хотите предотвратить действие по умолчанию среднего щелчка. В этом случае включите следующее

$("#foo").on('click', function(e) { 
   if (e.which == 2) {
      e.preventDefault();
      alert("middle button"); 
   }
});

protectDefault() остановит действие по умолчанию для события.

Ответ 2

Вы можете использовать

event.button

чтобы определить, какая кнопка мыши была нажата.

Возвращает целочисленное значение, указывающее кнопку, которая изменила состояние.

  • 0 для стандартного 'click', обычно левая кнопка
  • 1 для средней кнопки, обычно нажмите колесо
  • 2 для правой кнопки, обычно щелкните правой кнопкой мыши

Обратите внимание, что это соглашение не соблюдается в Internet Explorer: см. QuirksMode для деталей.

Порядок кнопок может отличаться в зависимости от того, как настроено указывающее устройство.

Также читайте

Какую кнопку мыши нажали?

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

Ответ 3

Для того, чтобы была обнаружена средняя кнопка мыши/колесико мыши, вы должны использовать событие auxclick. Например:

<a href="https://example.com" onauxclick="func()" id="myLink"></a>

Тогда в вашем файле сценария

func() {
    alert("middle button clicked")
}

Если вы хотите сделать это из JavaScript, то вы addEventListener добавили элемент:

let myLink = document.getElementById('myLink')
myLink.addEventListener('auxclick', function(event) {
    alert("middle button clicked")
})

Ознакомьтесь со страницей mdn о событии auxclick здесь.

Ответ 4

Я обычно ненавижу, когда люди предлагают альтернативы вместо решений, но поскольку решения уже предоставлены, я собираюсь нарушить свое собственное правило.

Сайты, на которых переопределена функция среднего щелчка, имеют тенденцию к действительному, действительно меня утомляют. Обычно я кликнуваю по середине, потому что хочу открыть новый контент на новой вкладке, имея беспрепятственный просмотр текущего содержимого. Каждый раз, когда вы можете оставить только функцию среднего щелчка и сделать доступный контент доступным через атрибут HREF вашего элемента clicked, я твердо верю, что вам следует делать.

Ответ 5

Этот вопрос немного устарел, но я нашел решение:

$(window).on('mousedown', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
   }
});

Хром не огонь "click" событие для колеса мыши

Работа в FF и Chrome

Ответ 6

jQuery предоставляет атрибут .which в событии, который дает идентификатор кнопки щелчка слева направо как 1, 2, 3. В этом случае вы хотите 2.

Использование:

$("#foo").live('click', function(e) { 
   if( e.which == 2 ) {
      alert("middle button"); 
   }
}); 

Ответ Adamantium также будет работать, но вам нужно следить за IE, поскольку он отмечает:

$("#foo").live('click', function(e) { 
   if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 2)) { 
     alert("middle button"); 
   } 
});

Также помните, что атрибут .button имеет 0-индексный индекс, а не 1-индексный, например .which.

Ответ 7

Правильный метод - использовать .on, поскольку .live устарел, а затем удален из jQuery:

$("#foo").on('click', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

Или, если вы хотите, чтобы "живое" чувство, а #foo не было на вашей странице при запуске документа:

$(document).on('click', '#foo', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

оригинальный ответ

Ответ 8

Я знаю, что опаздываю на вечеринку, но для тех, у кого по-прежнему возникают проблемы с обработкой среднего щелчка, проверьте, делегируете ли вы это событие. В случае делегирования событие click не срабатывает. Для сравнения:

Это работает для средних кликов:

$('a').on('click', function(){
    console.log('middle click');
});

Это не работает для средних кликов:

$('div').on('click', 'a', function(){
    console.log('middle click');
});

Если вам по-прежнему нужно отслеживать средний клик, используя делегирование событий, единственный способ, как указано в соответствующем jQuery ticket, заключается в использовании mousedown или mouseup. Например:

Это работает для делегированных средних кликов:

$('div').on('mouseup', 'a', function(){
    console.log('middle click');
});

Смотрите здесь онлайн.