Запуск події onclick за допомогою середнього клацання

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

РЕДАГУВАТИ

Ця відповідь застаріла і не працює в Chrome. Ви, швидше за все, в кінцевому підсумку використаєте подію auxlink , але зверніться до інших відповідей нижче.

/ РЕДАКТУВАТИ

відповідь жебраків правильна, але схоже, ви хочете запобігти дії за замовчуванням середнього клацання. У такому випадку включіть наступне

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

prevenDefault () зупинить дію події за замовчуванням.

Для того, щоб виявити кнопку середнього клацання / коліщатка миші, потрібно використати подію 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.

Порядок кнопок може бути різним, залежно від того, як було налаштовано вказівний пристрій.

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

На яку кнопку миші клацнули?

Існує дві властивості, щоб дізнатись, яку кнопку миші натиснуто: яку та кнопку. Зверніть увагу, що ці властивості не завжди працюють під час натискання. Щоб безпечно виявити кнопку миші, вам потрібно використовувати події миші або миші.

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 вашого натиснутого елемента, я впевнений, що саме це вам слід робити.

jQuery надає .whichатрибут події, який надає ідентифікатор кнопки клацання зліва направо як 1, 2, 3. У цьому випадку ви хочете 2.

Використання:

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

Відповідь Адамантія також спрацює, але вам потрібно стежити за IE, як він зазначає:

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

Також пам’ятайте, що .buttonатрибут - 0-індексований, а не 1-індексований, як .which.

Це питання трохи застаріле, але я знайшов рішення:

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

Правильним методом є використання .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>

Подивіться це в Інтернеті тут .