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

93

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

Sadesh Kumar N
источник
15
Я до сих пор не понимаю, как была решена проблема, когда средний щелчок не вызывает событие onclick.
Томаш Зато - Восстановить Монику
3
@ TomášZato Браузеры не запускают событие 'click' при нажатии средней кнопки мыши, но они могут запускать событие 'mouseup'. Тогда фреймворк javascript может привязать это к действию «щелчок», чтобы вас запутать. Я рекомендую чтение unixpapa.com/js/mouse.html
Rds

Ответы:

64

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

Этот ответ устарел и не работает в 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 () остановит действие события по умолчанию.

Gausie
источник
19
Имейте в виду, что .liveэто устарело и было удалено в пользу.on
Naftali aka Neal
2
Для меня FF работает только с событием mousedown. Событие Click называет эту штуку scr.hu/1kig/su5c9
l00k
1
Есть ли для этого кроссбраузерная константа 2?
fracz
11
Это больше не работает в Chrome 55. См. 1 , 2 и этот вопрос
billc.cn
1
Как это решение, если проблема заключалась в том, что средний щелчок не запускает событие щелчка?
Drazen Bjelovuk
36

Для обнаружения кнопки со средним щелчком / колесиком мыши необходимо использовать событие 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мероприятии здесь .

Хасан
источник
примечание: onauxclick будет работать, но он не открывает ссылку в новой вкладке ...
Джонатан Лалиберте
2
Это единственный ответ, который действительно работает в Chrome. Если вам нужно событие «щелчок» для правой кнопки мыши, вы можете использовать «contextmenu» (хотя оно запускается не только правой кнопкой мыши): developer.mozilla.org/en-US/docs/Web/API/Element/…
Канкаристо
2
в сочетании с приведенным выше ответом вы можете предотвратить захват правой кнопкой мыши по if(event.button==1)предложению, это единственный рабочий ответ.
Бадди
Обратите внимание, что вам нужно использовать как auxclickсобытие, так и проверить значение e.button == 1. Я отредактировал ответ.
Flimm
26

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

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>

рахул
источник
4
Я бы рекомендовал использовать, event.whichпоскольку он стандартизован для всех браузеров в исходном коде jQuery - строка 2756 -if ( !event.which && event.button ) event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
Расс Кэм
2
@RussCam Однако MouseEvent.whichне определен ни в одной спецификации, но MouseEvent.buttonопределен в событиях DOM L2.
Oriol
@Oriol верен, но реализован по-разному у разных поставщиков браузеров. OP пометил вопрос с помощью jQuery, поэтому я предложил использовать, event.whichно должен был уточнить, что MouseEvent.whichэто не часть официальной спецификации.
Russ Cam
@rahul, а игровые мышки с более чем 7 кнопками? egg-tech.com/blog/images/mouse%20buttons.jpg
Pacerier
На самом деле это не работает в таких браузерах, как Firefox или Chrome, только для первичного щелчка. См. 1 , 2 и этот вопрос .
Flimm
8

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

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

Том Хафлингер
источник
1
но что, если на вашей веб-странице есть вкладки, и вы хотите, чтобы их поведение было таким же, как в браузере? middleclick должен закрыть существующую вкладку.
cmxl
7

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

$(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

Бастьен Баст Вебер
источник
Я не хочу предполагать ваш вариант использования, но готов поспорить, что многим людям вместо этого понадобится событие 'mouseup'. Он также работает со средней кнопкой мыши.
Bojidar Stanchev
Когда я пробую это в Firefox и Chrome, это не предотвращает поведение по умолчанию при открытии ссылки в новой вкладке, даже если e.preventDefault()вызывается.
Flimm 05
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.

попрошайки
источник
могу ли я переопределить функциональность браузера Mozilla !! например, при щелчке левой кнопкой мыши открывается всплывающее окно .... но для среднего щелчка оно не открывает всплывающее окно, и открывается новая вкладка, в которой всплывающее окно не открывается ... поэтому я хочу переопределить функциональность среднего щелчка mozilla ....
Sadesh Kumar N
В Mozilla есть настройка для открытия всех всплывающих окон в новой вкладке, а не в новом окне. Если у пользователя включена эта опция, я не думаю, что вы что-то можете сделать. Если этого не происходит, можете ли вы опубликовать код или ссылку на проблемную страницу?
beggs
Это не работает в таких браузерах, как Firefox и Chrome.
Flimm
5

Правильный метод - использовать .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не работает для средней кнопки мыши в таких браузерах, как Firefox и Chrome.
Flimm,
раньше @Flimm
Naftali aka Neal
Да уж. У Stack Overflow нет хорошего решения для устаревших ответов. Боюсь, мне придется проголосовать против, потому что «Этот ответ бесполезен». Что еще хуже, закрепленный ответ может иметь сотни или тысячи отрицательных голосов, потому что он устарел, и он все равно останется закрепленным навсегда, если OP не отвечает.
Flimm
Задайте новый вопрос :-) (укажите на этот вопрос, что он устарел и вам нужен ответ 2020 года). Но также можно использовать события mousedown / mouseup?
Нафтали, он же Нил,
Даже если я это сделаю, такие люди, как я, все равно будут сталкиваться с этим ответом из поисковых систем и будут сбиты с толку неправильным ответом.
Flimm 05
3

Я знаю, что опаздываю на вечеринку, но тем, у кого все еще есть проблемы с обработкой среднего щелчка, проверьте, делегируете ли вы мероприятие. В случае делегирования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>

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

пропустить405
источник
Собственно, clickне работает для средних кликов, как в вашем первом примере.
Flimm