Déclencher un événement onclick à l'aide du clic du milieu

J'utilise l' onclickévénement d'un lien haché pour ouvrir <div>un pop-up. Mais le clic du milieu ne déclenche pas l' onclickévénement mais prend uniquement la hrefvaleur d'attribut du lien et charge l'URL dans une nouvelle page. Comment puis-je utiliser le clic du milieu pour ouvrir le en <div>tant que popup?

ÉDITER

Cette réponse est obsolète et ne fonctionne pas sur Chrome. Vous finirez probablement par utiliser l' événement auxlink , mais veuillez vous référer aux autres réponses ci-dessous.

/ÉDITER

La réponse de beggs est correcte, mais il semble que vous vouliez empêcher l'action par défaut du clic du milieu. Dans ce cas, incluez les éléments suivants

$("#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 () arrêtera l'action par défaut de l'événement.

Pour que le bouton du clic central / molette de la souris soit détecté, vous devez utiliser l'événement auxclick. Par exemple:

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

Puis dans votre fichier script

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

Si vous voulez le faire à partir de JavaScript (sans utiliser l'attribut HTML onauxclick), alors vous allez addEventListenerà l'élément:

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>

Consultez la page mdn sur l' auxclickévénement ici .

Vous pouvez utiliser

event.button

pour identifier le bouton de la souris sur lequel vous avez cliqué.

Renvoie une valeur entière indiquant le bouton dont l'état a changé.

• 0 pour un 'clic' standard, généralement bouton gauche
• 1 pour le bouton du milieu, généralement un clic sur la molette
• 2 pour le bouton droit, généralement un clic droit

Notez que cette convention n'est pas suivie dans Internet Explorer: voir QuirksMode pour plus de détails.

L'ordre des boutons peut être différent en fonction de la configuration du périphérique de pointage.

Lire aussi

Quel bouton de la souris a été cliqué?

Il existe deux propriétés pour savoir quel bouton de la souris a été cliqué: quel et bouton. Veuillez noter que ces propriétés ne fonctionnent pas toujours sur un événement de clic. Pour détecter en toute sécurité un bouton de la souris, vous devez utiliser les événements mousedown ou 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>

Je déteste généralement quand les gens proposent des alternatives au lieu de solutions, mais comme des solutions ont déjà été fournies, je vais enfreindre ma propre règle.

Les sites Web où la fonction de clic du milieu est annulée ont tendance à vraiment, vraiment me déranger. Je clique généralement avec le milieu parce que je souhaite ouvrir le nouveau contenu dans un nouvel onglet tout en ayant une vue dégagée du contenu actuel. Chaque fois que vous pouvez laisser la fonctionnalité de clic central seule et rendre le contenu pertinent disponible via l'attribut HREF de votre élément cliqué, je crois fermement que c'est ce que vous devez faire.

jQuery fournit un .whichattribut sur l'événement qui donne l'ID du bouton de gauche à droite comme 1, 2, 3. Dans ce cas, vous voulez 2.

Usage:

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

La réponse d'Adamantium fonctionnera également, mais vous devez faire attention à IE comme il le note:

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

Rappelez-vous également que l' .buttonattribut est indexé 0 et non indexé 1 comme .which.

Cette question est un peu ancienne, mais j'ai trouvé une solution:

$(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 ne déclenche pas l'événement "clic" pour la molette de la souris

Travailler dans FF et Chrome

La méthode appropriée consiste à utiliser .on, comme cela .livea été déconseillé, puis supprimé de jQuery:

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

Ou si vous voulez la sensation "en direct" et #foon'est pas sur votre page au début du document:

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

réponse originale

Je sais que je suis en retard pour la fête, mais pour ceux qui ont encore des problèmes avec la gestion du clic du milieu, vérifiez si vous déléguez l'événement. En cas de délégation, l' clickévénement ne se déclenche pas. Comparer:

Cela fonctionne pour les clics du milieu:

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

Cela ne fonctionne pas pour les clics du milieu:

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

Si vous avez toujours besoin de suivre le clic du milieu à l' aide de la délégation d'événements , le seul moyen de contourner, comme indiqué dans le ticket jQuery correspondant , est d'utiliser mousedownou à la mouseupplace. Ainsi:

Cela fonctionne pour les clics intermédiaires délégués:

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

Consultez-le en ligne ici .