Pourquoi le clic-milieu ne déclenche-t-il pas «cliquer» dans plusieurs cas?

Voici un jSFiddle du comportement que je vois, en ce qui concerne le clic central et l'événement de click dans Chrome et FF.

'Cliquer' un peu sorta fonctionne

Approche 1 : Lier un gestionnaire de click directement à a élément et un clic central déclenchera le gestionnaire dans Chrome mais pas dans FF.

 $('div a').on('click', function(ev) { // middle click triggers this handler });

Approche 2 : Lier un gestionnaire de click délégué à un div qui contient un ou plusieurs a . Le clic central ne déclenchera pas ce gestionnaire dans Chrome ou FF.

 $('div').on('click', 'a', function(ev) { // middle click doesn't trigger this handler });

Cette approche est extrêmement utile si le div commence vide et les éléments a sont remplis plus tard par un appel AJAX ou par suite de l'entrée d'un utilisateur.

'Mouseup' fonctionne

L'utilisation de la mouseup place du click provoque l'approche 1 et 2 à la fois dans les deux navigateurs.

 // Approach 1 w/ mouseup $('div a').on('mouseup', function(ev) { // middle click **does** trigger this handler in Chrome and FF }); // Approach 2 w/ mouseup $('div').on('mouseup', 'a', function(ev) { // middle click **does** trigger this handler in Chrome and FF });

Voici le JSFiddle avec mouseup .

Ceci est intéressant et pourrait être utile dans certains cas, car mouseup est presque click . Mais mouseup n'est pas un click , et je suis après le comportement de click . Je ne veux pas créer un mousedown; setTimeout; mouseup hacky mousedown; setTimeout; mouseup mousedown; setTimeout; mouseup Simulation de click de click .

Je suis certain que la réponse est "non", mais existe-t-il un moyen de naviguer de manière croisée pour provoquer un clic central pour déclencher les gestionnaires de click ? Sinon, quelles sont les raisons pour lesquelles?

L'événement de clic est généralement déclenché pour le bouton gauche de la souris, cependant, selon le navigateur, l'événement de clic peut ou non se produire pour le bouton droit et / ou le bouton central.

Dans Internet Explorer et Firefox, l'événement de clic n'est pas activé pour les boutons du droit ou du milieu.

Par conséquent, nous ne pouvons pas utiliser de manière fiable l'événement de clic pour les gestionnaires d'événements sur le bouton central ou droit.

Au lieu de cela, pour distinguer les boutons de la souris, nous devons utiliser les événements mousedown et mouseup car la plupart des navigateurs déclenchent des événements mousedown et mouseup pour n'importe quel bouton de souris.

Dans Firefox et Chrome event.which devrait contenir un nombre indiquant quel bouton de la souris a été pressé (1 est gauche, 2 est au milieu, 3 est à droite).

Dans Internet Explorer, d'autre part, le event.button indique le bouton de la souris qui a été cliqué (1 est à gauche, 4 est au milieu, 2 à droite);

event.button devrait également fonctionner dans Firefox et d'autres navigateurs, mais les nombres peuvent être légèrement différents (0 est gauche, 1 est au milieu, 2 à droite).

Donc, pour mettre ensemble ensemble, nous faisons quelque chose comme ça:

 document.onmousedown = function(e) { var evt = e==null ? event : e; if (evt.which) { // if e.which, use 2 for middle button if (evt.which === 2) { // middle button clicked } } else if (evt.button) { // and if e.button, use 4 if (evt.button === 4) { // middle button clicked } } }

Comme jQuery normalise l' event.which , vous devriez seulement l'utiliser dans les gestionnaires d'événements jQuery et, en tant que tel, faire:

 $('div a').on('mousedown', function(e) { if (e.which === 2) { // middle button clicked } });

En d'autres termes, vous ne pouvez pas utiliser l'événement onclick, afin de le simuler, vous pouvez utiliser à la fois mousedown et mouseup.

Vous pouvez ajouter une minuterie pour limiter le temps autorisé entre l'événement mousedown et mouseup ou même lancer un gestionnaire de mousemove pour limiter le mouvement entre un événement mousedown et mouseup, et rendre le gestionnaire d'événements ne pas déclencher si le pointeur de la souris a déplacé plus de dix Les pixels, etc., les possibilités sont presque infinies, ce qui ne devrait pas vraiment être un problème.

 $('#test').on({ mousedown: function(e) { if (e.which === 2) { $(this).data('down', true); } }, mouseup: function(e) { if (e.which === 2 && $(this).data('down')) { alert('middle button clicked'); $(this).data('down', false); } } });

Réponse courte: non.

La question est de savoir à quoi voulez-vous capturer les clics du milieu? Un clic central n'est pas destiné à interagir avec la page actuelle, mais plutôt à ouvrir un lien dans un nouvel onglet.

Chrome fonctionne actuellement pour supprimer ce comportement: https://code.google.com/p/chromium/issues/detail?id=255

Et il existe actuellement une discussion générale sur la liste de diffusion w3c sur ce sujet: http://lists.w3.org/Archives/Public/www-dom/2013JulSep/0203.html

Pourtant, pour l'instant, vous pouvez capturer les middleclicks dans Firefox sur un document:

 $(document).on('click', function(e){ console.log(e); });