web-dev-qa-db-fra.com

Détecter le clic du bouton central (bouton de défilement) avec jQuery

J'ai une liste avec des balises pour lire des fichiers mp3 en un clic. Cela fonctionne bien lorsque vous liez l'événement 'click' avec jQuery:

$oo.data({'__mp3play':true,'wapiHandle':h+0,'wapiIndex':o.ajaxPlayList[h].length})
           .bind( 'click', function()
            { var wh = $j(this).data('wapiHandle');
              if( typeof o.regObjects[wh] == 'object' && o.regObjects[wh].play(this.href))
               { return false; }
            });

En cliquant sur le bouton gauche de la souris: .__ désactive la gestion par défaut lorsque mon plugin flash est chargé, sinon il sera ouvert normalement.

MAIS: Lorsque j'utilise le bouton de défilement de la souris et que je clique dessus, l'événement click ne se déclenche pas et le lien s'ouvre normalement.

J'ai essayé d'utiliser des événements Mousedown ou Mouseup mais cela ne change rien, le lien s'ouvre toujours normalement avec pour effet secondaire que la musique commence à jouer également avec le lecteur flash.

De plus, preventDefault() ne fonctionne pas du tout.

Quelqu'un peut-il me dire comment détecter le clic du bouton central de la souris (clic du bouton de défilement)?

Merci pour vos commentaires.

PS: J'ai déjà essayé d'autres solutions concernant le «bouton central» disponible sur ce site.

Testé dans tous les types de navigateurs avec le même résultat. 

EDIT: Cela ne fonctionne pas non plus, le lien sera ouvert normalement avec le bouton central de la souris. Lorsque vous utilisez le bouton gauche de la souris, rien ne se passe. 

$oo.bind( 'mousedown click mouseup', function(e)
{ e.preventDefault(); e.stopPropagation(); return false; });
jquerybuttonclickscroll
17
Codebeat

Ok les gars,

Merci pour votre participation. '@ no.good.at.coding' a une solution intéressante mais ne fonctionne pas IE (voir plus loin dans cet écrit) mais constitue un bon point de départ. Je change son code pour ceci:

// Avoid relations will be opened in extra tab when clicking middle-scroll-button to open it
$(document).bind($.browser.msie ? "mousedown" : "click", function(e)
{
    if (e.which == 2 && e.target.tagName == 'A') 
    {
        var bIE = $.browser.msie,
            $o = $(e.target),
            oe = $o.data('events'),
            b = true,
            f = function(){};

        if (typeof oe == 'object' && oe['click']) {
            f = function(){ $o.trigger('click'); }
        } else {
            b = (typeof $o[0].href == 'string' && ($o[0].target == undefined || $o[0].target == '' || $o[0].target == '_self'));
            if (b) { 
                f = function () { window.location.href=$o[0].href; };
            }
        }

        if (!b) { return; }

        e.stopImmediatePropagation();
        e.stopPropagation();
        e.preventDefault();

        if (bIE)
        {
            if (!window.__swcp__) { 
                window.__swcp__= $('<div style="position:fixed;top:0px;left:0px;width:100%;height:100%;background:#000;display:block;z-index:9999;opacity:0.01;filter:alpha(opacity:1);" />').appendTo('body'); 
            }
            window.__swcp__.show();
        }

        setTimeout(f, 50);
        if (bIE) { 
            setTimeout( function() { window.__swcp__.hide(); }, 1000 );
        }

        return false;
    }
});

Le bouton du milieu agit maintenant comme le bouton gauche de la souris. Comme vous pouvez le voir IE a besoin de plus, nous devons déconcentrer la balise link pendant 1 seconde pour éviter qu'elle ne soit ouverte dans un onglet supplémentaire. J'utilise ici un moyen simple de le faire, créer un div transparent "pour l'oeil" (opacité = 0.01) qui sera placé sur le contenu de la fenêtre de sorte que tout lien sur la page ne soit plus ciblé . L'utilisateur ne le remarquera pas toute différence, si ce n'est que le pointeur de la souris peut changer de pointeur à celui par défaut et, au bout d’une seconde, redevenir un pointeur (IE uniquement). 

J'accepte cela comme une réponse, mais si vous avez une meilleure idée, faites-le-moi savoir.

3
Codebeat

Après un rapide test, il semble que les trois soient classés comme suit:

  • Gauche - 1
  • Moyen - 2
  • Droite - 3

Donc si vous aviez:

$(document).mousedown(function(e){
    switch(e.which)
    {
        case 1:
            //left Click
        break;
        case 2:
            //middle Click
        break;
        case 3:
            //right Click
        break;
    }
    return true;// to allow the browser to know that we handled it.
});
45
RobertPitt

Ok, je pense que je l'ai. Voici un violon qui semble fonctionner . Le truc (du moins avec FF4) semble être de lier un gestionnaire de clics à la variable document et de le faire arrêter la propagation.

$(document).click(function(e){
        //not checking for the right click will prevent the context-menu from showing, you may or may not want to do that
        if (e.which != 3) { 
            e.preventDefault();
            return false;
        }
    });

Cette solution a été trouvée sur cette page du forum .

7
no.good.at.coding

Veuillez ne pas déclencher des actions de clic lors de l'événement mousedown. Il ignore le reste du pipeline d'événements et va à l'encontre des attentes actuelles des utilisateurs et des pratiques de conception.

Problème

Voici un aperçu de l'ordre normal des événements qui se déclenchent pour chaque type de clic:

$(document).on("mousedown mouseup click focus blur",function(e) {
  console.log("{" + e.which + ":" + e.type + "}"); 
});

 Click Events

En règle générale, nous gérons le tout dernier click événement car il indique l'intention finale des utilisateurs de poursuivre l'action en cours.

L'événement click est déclenché lorsqu'un bouton de périphérique de pointage (généralement le bouton principal de la souris) est appuyé et relâché sur un élément unique.

Malheureusement, les appuis intermédiaires ne déclenchent pas un tel événement (probablement parce que cela obligerait les développeurs à écouter l'événement click à faire la distinction entre plusieurs invocations possibles). Mais si nous voulons relier les actions contre le clic central, nous devrions suivre les mêmes attentes UX.

Solution

Nous écouterons les événements mousedown et attacherons immédiatement un gestionnaire d’utilisation ponctuelle pour les événements mouseup. Si la touche du milieu a été enfoncée et si les éléments correspondent, nous allons déclencher notre propre événement personnalisé de type middleclick, que nous allons générer à partir de l'événement d'origine .

$(document).on("mousedown", function (e1) {
  $(document).one("mouseup", function (e2) {
    if (e1.which == 2 && e1.target == e2.target) {
      var e3 = $.event.fix(e2);
      e3.type = "middleclick";
      $(e2.target).trigger(e3)
    }
  });
});

Cela aidera à séparer la détermination du if le bouton du milieu avec la façon dont nous voulons le gérer dans ce cas, afin que nous puissions configurer un écouteur pour notre type d'événement personnalisé comme ceci:

$(document).on("middleclick", function (e) {
    console.log("{" + e.target.nodeName.toLowerCase() + ":" + e.type + "}"); 
});

Démo de travail dans jsFiddle et Stack Snippets:

$(document).on("mousedown", function (e1) {
  $(document).one("mouseup", function (e2) {
    if (e1.which == 2 && e1.target == e2.target) {
    	var e3 = $.event.fix(e2);
      e3.type = "middleclick";
      $(e2.target).trigger(e3)
    }
  });
});

$(document).on("middleclick", function (e) {
  console.log("{" + e.target.nodeName.toLowerCase() + ":" + e.type + "}"); 
});

$(document).on("mousedown mouseup click focus blur",function(e) {
  console.log("{" + e.which + ":" + e.type + "}"); 
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<div  style="background:#31965a;color:white;width:100px;height:100px;line-height:100px;text-align:center;">
  Click Me!
</div>

* Testé sous Chrome, FF, Edge et IE11

4
KyleMit

e.qui devrait le faire:

Exemple simple:

$(document).ready(function(){
    $(document).mousedown(function(e){
         alert(e.which); // ##=> left
    }) 
})
0
Yule