Запуск события onclick с помощью средней кнопки мыши

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

РЕДАКТИРОВАТЬ

Этот ответ устарел и не работает в Chrome. Скорее всего, вы в конечном итоге используете событие auxlink , но, пожалуйста, обратитесь к другим ответам ниже.

/РЕДАКТИРОВАТЬ

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="foo" href="http://example.com">middle click me</a>

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

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

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

Затем в вашем файле сценария

function func(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
}

Если вы хотите сделать это из JavaScript (без использования атрибута HTML onauxclick), то вы addEventListenerк элементу:

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

<a id="myLink" href="http://example.com">middle click me</a>

Посетите страницу mdn о auxclickмероприятии здесь .

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

event.button

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

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

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

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

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

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

Какая кнопка мыши была нажата?

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

document.getElementById('foo').addEventListener('click', function(e) {
  console.log(e.button);
  e.preventDefault();
});

<a id="foo" href="http://example.com">middle click me</a>

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

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

Chrome не запускает событие "щелчок" колесика мыши

Работа в FF и Chrome

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.

Правильный метод - использовать .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"); 
   }
});

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

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click here</a>
</div>

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click me</a>
</div>

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