So unterscheiden Sie mit jQuery zwischen Links- und Rechtsklick

574

Wie erhalten Sie die angeklickte Maustaste mit jQuery?

$('div').bind('click', function(){
    alert('clicked');
});

Dies wird sowohl durch Rechts- als auch durch Linksklick ausgelöst. Wie kann man mit der rechten Maustaste fangen? Ich würde mich freuen, wenn so etwas wie das Folgende existiert:

$('div').bind('rightclick', function(){ 
    alert('right mouse button is pressed');
});
Sinan
quelle

Antworten:

900

Ab jQuery - Version 1.1.3, event.whichnormalisiert event.keyCodeund event.charCodeschauen Sie sich Sorgen über Browser - Kompatibilitätsprobleme nicht haben. Dokumentation amevent.which

event.which gibt 1, 2 oder 3 für die linke, mittlere und rechte Maustaste, also:

$('#element').mousedown(function(event) {
    switch (event.which) {
        case 1:
            alert('Left Mouse button pressed.');
            break;
        case 2:
            alert('Middle Mouse button pressed.');
            break;
        case 3:
            alert('Right Mouse button pressed.');
            break;
        default:
            alert('You have a strange Mouse!');
    }
});
Eichel
quelle
4
@ Jeff Hines - Ich habe versucht, einen Rechtsklick in Chrome zu erkennen, und die hier gezeigte Implementierung schien einwandfrei zu funktionieren, aber mir wurde klar, dass dies nur darauf zurückzuführen war, dass durch alert () das Kontextmenü nicht angezeigt wurde. :( boo
jinglesthula
15
Scrollen Sie weiter nach unten und lesen Sie die Antwort von @ JeffHines . Grundsätzlich verfügt jQuery über dieses integrierte Ereignis-Kontextmenü.
jpadvo
8
@jpadvo jQuery hat es nicht als "Kontextmenü" erstellt, contextmenuist nativ im Browser. In nativem JavaScript können Sie an das oncontextmenuEreignis anhängen .
Naftali aka Neal
6
ie8: Wert der Eigenschaft 'which': Objekt kann nicht abgerufen werden. Null oder undefiniert
Simon
2
Kann ich verhindern, dass das Kontextmenü nach dem Auslösen des Ereignisses angezeigt wird?
kmoney12
251

Bearbeiten : Ich habe es so geändert, dass es für dynamisch hinzugefügte Elemente .on()in jQuery 1.7 oder höher funktioniert :

$(document).on("contextmenu", ".element", function(e){
   alert('Context Menu event has fired!');
   return false;
});

Demo: jsfiddle.net/Kn9s7/5

[Beginn des ursprünglichen Beitrags] Folgendes hat bei mir funktioniert:

$('.element').bind("contextmenu",function(e){
   alert('Context Menu event has fired!');
   return false;
}); 

Für den Fall, dass Sie mehrere Lösungen bevorzugen ^^

Bearbeiten : Tim Down bringt einen guten Punkt vor, dass es nicht immer ein Ereignis sein wird, right-clickdas das contextmenuEreignis auslöst, sondern auch, wenn die Kontextmenütaste gedrückt wird (was wohl ein Ersatz für a ist right-click).

Jeff Hines
quelle
28
Dies sollte die akzeptierte Antwort sein. Dieses Ereignis funktioniert in allen relevanten Browsern und wird mit einem ganzen Klick ausgelöst (Maus nach unten + Maus nach oben in der Nähe).
Nick Retallack
3
Dies ist die einzige Lösung, die für mich im Hinblick auf die Erfassung des Rechtsklicks auf einen <textarea>
styler1972
17
Ein Rechtsklick ist jedoch nicht die einzige Möglichkeit, das Kontextmenü auszulösen.
Tim Down
3
Ich denke, es ist der falsche Ansatz, da das contextmenuAuslösen eines Ereignisses nicht immer bedeutet, dass die rechte Maustaste gedrückt wurde. Der richtige Ansatz besteht darin, Schaltflächeninformationen von einem Mausereignis abzurufen ( clickin diesem Fall).
Tim Down
1
Hallo! Danke, das sieht gut aus, aber ich kann es nicht dazu bringen, an ein Element wie eine Tabellenzeile oder sogar den Körper zu binden. es funktioniert mit $ (Fenster). Ich benutze backbone.js, um einen Bereich #main mit neuen Inhalten usw. zu füllen
Harry
84

Sie können leicht feststellen, welche Maustaste gedrückt wurde, indem Sie die whichEigenschaft des Ereignisobjekts bei Mausereignissen überprüfen :

/*
  1 = Left   mouse button
  2 = Centre mouse button
  3 = Right  mouse button
*/

$([selector]).mousedown(function(e) {
    if (e.which === 3) {
        /* Right mouse button was clicked! */
    }
});
Russ Cam
quelle
3
Das oben verlinkte jQuery-Plugin verwendet e.button==2stattdessen.
Ceejayoz
6
ja. Die Verwendung eines event.buttonCross-Browsers ist eher ein Problem als event.whichda die für die Schaltflächen verwendeten Nummern event.buttonvariieren. Schauen Sie sich diesen Artikel vom Januar 2009 an - unixpapa.com/js/mouse.html
Russ Cam
1
Wäre es nicht besser, zu mouseupüberprüfen, ob eine Person wirklich auf den Artikel geklickt hat? Es gibt viele Male, wenn ich versehentlich auf etwas klicke, kann ich das Klicken verhindern, indem ich die Maustaste gedrückt halte und außerhalb des Elements ziehe.
Chris Marisic
1
@ ChrisMarisic mouseupist wahrscheinlich eine bessere Veranstaltung, dies ist nur ein Beispiel für die Verwendung von event.whichfür Mausklicks
Russ Cam
39

Sie können auch bindzu contextmenuund return false:

$('selector').bind('contextmenu', function(e){
    e.preventDefault();
    //code
    return false;
});

Demo: http://jsfiddle.net/maniator/WS9S2/

Oder Sie können ein schnelles Plugin erstellen, das dasselbe tut:

(function( $ ) {
  $.fn.rightClick = function(method) {

    $(this).bind('contextmenu rightclick', function(e){
        e.preventDefault();
        method();
        return false;
    });

  };
})( jQuery );

Demo: http://jsfiddle.net/maniator/WS9S2/2/


Verwenden von .on(...)jQuery> = 1.7:

$(document).on("contextmenu", "selector", function(e){
    e.preventDefault();
    //code
    return false;
});  //does not have to use `document`, it could be any container element.

Demo: http://jsfiddle.net/maniator/WS9S2/283/

Naftali alias Neal
quelle
1
@ Raynos ja, aber das ist die einzige Möglichkeit, ein Rechtsklick-Ereignis zu behandeln. Wenn das Kontextmenü noch vorhanden war, konnten Sie mit einem Rechtsklick nichts tun.
Naftali aka Neal
1
@ Raynos - Es gibt viele Fälle, in denen Ihr Punkt nicht gültig ist, wie das Erstellen eines internen Tools oder das Codieren von etwas für Ihren persönlichen Gebrauch. Ich bin sicher, es gibt noch mehr
vsync
1
Wenn Sie tatsächlich wollten, dass es sich wie einer der jQuery-Ereignishandler verhält (wie z. B. click), sollte dies method.call(this, e);anstelle von " method();so" erfolgen, methodden korrekten Wert für erhalten thisund das Ereignisobjekt auch korrekt an ihn übergeben werden.
Jeremy T
@ JeremyT das ist wahr ... Sie könnten den Rückruf so behandeln, wie Sie möchten ^ _ ^
Naftali aka Neal
30

$("#element").live('click', function(e) {
  if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
       alert("Left Button");
    }
    else if(e.button == 2){
       alert("Right Button");
    }
});

Update für den aktuellen Stand der Dinge:

var $log = $("div.log");
$("div.target").on("mousedown", function() {
  $log.text("Which: " + event.which);
  if (event.which === 1) {
    $(this).removeClass("right middle").addClass("left");
  } else if (event.which === 2) {
    $(this).removeClass("left right").addClass("middle");
  } else if (event.which === 3) {
    $(this).removeClass("left middle").addClass("right");
  }
});
div.target {
  border: 1px solid blue;
  height: 100px;
  width: 100px;
}

div.target.left {
  background-color: #0faf3d;
}

div.target.right {
  background-color: #f093df;
}

div.target.middle {
  background-color: #00afd3;
}

div.log {
  text-align: left;
  color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target"></div>
<div class="log"></div>

TheVillageIdiot
quelle
1
ist das msie-spezifisch? dh ist es über andere Browser portierbar?
Taryn East
13
Diese Methode ist jetzt nicht mehr erforderlich, da event.whichsie eingeführt wurde, wodurch die Cross-Browser-Kompatibilität beseitigt wird.
Eichel
8
Ich vermute ein Ereignis, das tatsächlich die Cross-Browser-Inkompatibilität beseitigt, aber das bin nur ich.
DwB
18
$.event.special.rightclick = {
    bindType: "contextmenu",
    delegateType: "contextmenu"
};

$(document).on("rightclick", "div", function() {
    console.log("hello");
    return false;
});

http://jsfiddle.net/SRX3y/8/

Esailija
quelle
15

Es gibt viele sehr gute Antworten, aber ich möchte nur einen großen Unterschied zwischen IE9 und IE <9 bei der Verwendung ansprechen event.button.

Gemäß der alten Microsoft-Spezifikation event.buttonunterscheiden sich die Codes von denen, die von W3C verwendet werden. W3C berücksichtigt nur 3 Fälle:

  1. Linke Maustaste wird angeklickt - event.button === 1
  2. Die rechte Maustaste wird angeklickt - event.button === 3
  3. Mittlere Maustaste wird angeklickt - event.button === 2

In älteren Internet Explorern dreht Microsoft jedoch ein wenig nach dem gedrückten Knopf und es gibt 8 Fälle:

  1. Es wird keine Schaltfläche angeklickt - event.button === 0oder 000
  2. Die linke Taste wird angeklickt - event.button === 1oder 001
  3. Klicken Sie auf die rechte Schaltfläche - event.button === 2oder auf 010
  4. Linke und rechte Taste werden angeklickt - event.button === 3oder 011
  5. Die mittlere Schaltfläche wird angeklickt - event.button === 4oder 100
  6. Die mittleren und linken Tasten werden angeklickt - event.button === 5oder 101
  7. Die mittleren und rechten Tasten werden angeklickt - event.button === 6oder 110
  8. Alle 3 Schaltflächen werden angeklickt - event.button === 7oder 111

Trotz der Tatsache, dass dies theoretisch so funktionieren sollte, hat kein Internet Explorer jemals die Fälle unterstützt, in denen zwei oder drei Tasten gleichzeitig gedrückt wurden. Ich erwähne es, weil der W3C-Standard dies theoretisch nicht einmal unterstützen kann.

Konstantin Dinev
quelle
6
so auf Knopfdruck erhalten Sie, event.button === 0dass kein Knopf geklickt wird, brillanter IEಠ_ಠ
Sinan
Das ist in Versionen von IE niedriger als 9.
Konstantin Dinev
Wenn Entwickler gemeinsam aufhören würden, sich für die Unterstützung zu entscheiden, müssten die Leute wechseln, und dann müssten sich die Entwickler nicht mehr um die Unterstützung kümmern, dh.
Ahnbizcad
8

Es scheint mir, dass eine geringfügige Anpassung der Antwort von TheVillageIdiot sauberer wäre:

$('#element').bind('click', function(e) {
  if (e.button == 2) {
    alert("Right click");
  }
  else {
    alert("Some other click");
  }
}

BEARBEITEN: JQuery stellt ein e.whichAttribut bereit , das 1, 2, 3 für Links-, Mittel- und Rechtsklick zurückgibt. Sie könnten also auch verwendenif (e.which == 3) { alert("right click"); }

Siehe auch: Antworten zu "Onclick-Ereignis mit mittlerem Klick auslösen"

Dan Burton
quelle
3

event.which === 1 stellt sicher, dass es sich um einen Linksklick handelt (bei Verwendung von jQuery).

Sie sollten aber auch über Modifikatortasten nachdenken: ctrlcmdshiftalt

Wenn Sie nur einfache, unveränderte Linksklicks abfangen möchten, können Sie Folgendes tun:

var isSimpleClick = function (event) {
  return !(
    event.which !== 1 || // not a left click
    event.metaKey ||     // "open link in new tab" (mac)
    event.ctrlKey ||     // "open link in new tab" (windows/linux)
    event.shiftKey ||    // "open link in new window"
    event.altKey         // "save link as"
  );
};

$('a').on('click', function (event) {
  if (isSimpleClick(event)) {
    event.preventDefault();
    // do something...
  }
});
Callum
quelle
1

Wenn Sie nach "Better Javascript Mouse Events" suchen, die dies ermöglichen

  • verließ mousedown
  • mittlere Maus
  • rechts mousedown
  • linker Mouseup
  • mittlere Maus
  • rechte Maustaste
  • links Klick
  • Mittelklick
  • Rechtsklick
  • Mausrad hoch
  • Mausrad runter

Schauen Sie sich dieses browserübergreifende normale Javascript an, das die oben genannten Ereignisse auslöst und die Kopfschmerzen beseitigt. Kopieren Sie es einfach und fügen Sie es in den Kopf Ihres Skripts ein oder fügen Sie es in eine Datei in <head>Ihrem Dokument ein. Binden Sie dann Ihre Ereignisse. Lesen Sie dazu den nächsten Codeblock unten, der ein Beispiel für die Erfassung der Ereignisse und das Auslösen der ihnen zugewiesenen Funktionen zeigt. Dies funktioniert jedoch auch mit normaler Javascript-Bindung.

Wenn Sie daran interessiert sind, dass es funktioniert, schauen Sie sich die jsFiddle an: https://jsfiddle.net/BNefn/

/**
   Better Javascript Mouse Events
   Author: Casey Childers
**/
(function(){
    // use addEvent cross-browser shim: https://gist.github.com/dciccale/5394590/
    var addEvent = function(a,b,c){try{a.addEventListener(b,c,!1)}catch(d){a.attachEvent('on'+b,c)}};

    /* This function detects what mouse button was used, left, right, middle, or middle scroll either direction */
    function GetMouseButton(e) {
        e = window.event || e; // Normalize event variable

        var button = '';
        if (e.type == 'mousedown' || e.type == 'click' || e.type == 'contextmenu' || e.type == 'mouseup') {
            if (e.which == null) {
                button = (e.button < 2) ? "left" : ((e.button == 4) ? "middle" : "right");
            } else {
                button = (e.which < 2) ? "left" : ((e.which == 2) ? "middle" : "right");
            }
        } else {
            var direction = e.detail ? e.detail * (-120) : e.wheelDelta;
            switch (direction) {
                case 120:
                case 240:
                case 360:
                    button = "up";
                break;
                case -120:
                case -240:
                case -360:
                    button = "down";
                break;
            }
        }

        var type = e.type
        if(e.type == 'contextmenu') {type = "click";}
        if(e.type == 'DOMMouseScroll') {type = "mousewheel";}

        switch(button) {
            case 'contextmenu':
            case 'left':
            case 'middle':
            case 'up':
            case 'down':
            case 'right':
                if (document.createEvent) {
                  event = new Event(type+':'+button);
                  e.target.dispatchEvent(event);
                } else {
                  event = document.createEventObject();
                  e.target.fireEvent('on'+type+':'+button, event);
                }
            break;
        }
    }

    addEvent(window, 'mousedown', GetMouseButton);
    addEvent(window, 'mouseup', GetMouseButton);
    addEvent(window, 'click', GetMouseButton);
    addEvent(window, 'contextmenu', GetMouseButton);

    /* One of FireFox's browser versions doesn't recognize mousewheel, we account for that in this line */
    var MouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
    addEvent(window, MouseWheelEvent, GetMouseButton);
})();

Besseres Beispiel für Mausklickereignisse (verwendet der Einfachheit halber jquery, aber das oben Gesagte funktioniert browserübergreifend und löst dieselben Ereignisnamen aus, die der IE vor den Namen verwendet).

<div id="Test"></div>
<script type="text/javascript">
    $('#Test').on('mouseup',function(e){$(this).append(e.type+'<br />');})
              .on('mouseup:left',function(e){$(this).append(e.type+'<br />');})
              .on('mouseup:middle',function(e){$(this).append(e.type+'<br />');})
              .on('mouseup:right',function(e){$(this).append(e.type+'<br />');})

              .on('click',function(e){$(this).append(e.type+'<br />');})
              .on('click:left',function(e){$(this).append(e.type+'<br />');})
              .on('click:middle',function(e){$(this).append(e.type+'<br />');})
              .on('click:right',function(e){$(this).append(e.type+'<br />');})

              .on('mousedown',function(e){$(this).html('').append(e.type+'<br />');})
              .on('mousedown:left',function(e){$(this).append(e.type+'<br />');})
              .on('mousedown:middle',function(e){$(this).append(e.type+'<br />');})
              .on('mousedown:right',function(e){$(this).append(e.type+'<br />');})

              .on('mousewheel',function(e){$(this).append(e.type+'<br />');})
              .on('mousewheel:up',function(e){$(this).append(e.type+'<br />');})
              .on('mousewheel:down',function(e){$(this).append(e.type+'<br />');})
              ;
</script>

Und für diejenigen, die die minimierte Version benötigen ...

!function(){function e(e){e=window.event||e;var t="";if("mousedown"==e.type||"click"==e.type||"contextmenu"==e.type||"mouseup"==e.type)t=null==e.which?e.button<2?"left":4==e.button?"middle":"right":e.which<2?"left":2==e.which?"middle":"right";else{var n=e.detail?-120*e.detail:e.wheelDelta;switch(n){case 120:case 240:case 360:t="up";break;case-120:case-240:case-360:t="down"}}var c=e.type;switch("contextmenu"==e.type&&(c="click"),"DOMMouseScroll"==e.type&&(c="mousewheel"),t){case"contextmenu":case"left":case"middle":case"up":case"down":case"right":document.createEvent?(event=new Event(c+":"+t),e.target.dispatchEvent(event)):(event=document.createEventObject(),e.target.fireEvent("on"+c+":"+t,event))}}var t=function(e,t,n){try{e.addEventListener(t,n,!1)}catch(c){e.attachEvent("on"+t,n)}};t(window,"mousedown",e),t(window,"mouseup",e),t(window,"click",e),t(window,"contextmenu",e);var n=/Firefox/i.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel";t(window,n,e)}();
NinjaKC
quelle
1
$("body").on({
    click: function(){alert("left click");},
    contextmenu: function(){alert("right click");}   
});
AK
quelle
Sie sollten wahrscheinlich einige Details hinzufügen, warum es funktioniert. - Ich bin damit einverstanden, aber Sie erklären einem n00b nicht, warum.
Adam Copley
0
$(document).ready(function () {
    var resizing = false;
    var frame = $("#frame");
    var origHeightFrame = frame.height();
    var origwidthFrame = frame.width();
    var origPosYGrip = $("#frame-grip").offset().top;
    var origPosXGrip = $("#frame-grip").offset().left;
    var gripHeight = $("#frame-grip").height();
    var gripWidth = $("#frame-grip").width();

    $("#frame-grip").mouseup(function (e) {
        resizing = false;
    });

    $("#frame-grip").mousedown(function (e) {
        resizing = true;
    });
    document.onmousemove = getMousepoints;
    var mousex = 0, mousey = 0, scrollTop = 0, scrollLeft = 0;
    function getMousepoints() {
        if (resizing) {
            var MouseBtnClick = event.which;
            if (MouseBtnClick == 1) {
                scrollTop = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
                scrollLeft = document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft;
                mousex = event.clientX + scrollLeft;
                mousey = event.clientY + scrollTop;

                frame.height(mousey);
                frame.width(mousex);
            }
            else {
                resizing = false;
            }
        }
        return true;

    }


});
user2335866
quelle
@ Nitin.Katti: - Dies ist eine Aufarbeitung des Mauspunkts und des Linksklickens. Wenn Sie die linke Maustaste einfrieren, wird die Größenänderung gestoppt.
user2335866
0

Mit jquery können Sie verwenden event object type

jQuery(".element").on("click contextmenu", function(e){
   if(e.type == "contextmenu") {
       alert("Right click");
   }
});
Ari
quelle
0

Es gibt auch eine Möglichkeit, dies ohne JQuery zu tun!

Schau dir das an:

document.addEventListener("mousedown", function(evt) {
    switch(evt.buttons) {
      case 1: // left mouse
      case 2: // right mouse
      case 3: // middle mouse <- I didn't tested that, I just got a touchpad
    }
});

quelle
Die mittlere Maus schien 4 auf meinem PC zu sein (Ubuntu 14.04 - FireFox). Ich glaube, links und rechts zusammen ist 3 und Mitte ist 4. Es muss einen besseren "Cross Browser", "Cross Platform" Weg geben ...
Paul
0
$.fn.rightclick = function(func){
    $(this).mousedown(function(event){
        if(event.button == 2) {
            var oncontextmenu = document.oncontextmenu;
            document.oncontextmenu = function(){return false;};
            setTimeout(function(){document.oncontextmenu = oncontextmenu;},300);
            func(event);
            return false;
        }
    });
};

$('.item').rightclick(function(e){ 
    alert("item");
}); 
user3361174
quelle
0

Für diejenigen , die sich fragen, ob sie sollten oder nicht verwenden event.whichin Vanille JS oder Angular : Es ist jetzt veraltet so lieber mit event.buttonsstatt.

Hinweis: Mit dieser Methode und (Mousedown-) Ereignis:

  • Linksklick drücken ist 1 zugeordnet
  • Rechtsklick drücken ist mit 2 verbunden
  • Das Drücken der Navigationstaste ist mit 4 verbunden

und (mouseup) Ereignis gibt NICHT die gleichen Zahlen zurück, sondern 0 .

Quelle: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons

Valink
quelle
-1
    $.event.special.rightclick = {
     bindType: "contextmenu",
        delegateType: "contextmenu"
      };

   $(document).on("rightclick", "div", function() {
   console.log("hello");
    return false;
    });
Yip Man WingChun
quelle
1
Hallo. Diese Antwort wird zum Löschen als minderwertig gekennzeichnet. Anscheinend haben Sie eine Antwort auf eine Frage hinzugefügt, die vor einiger Zeit beantwortet wurde. Sofern die Antwort keine Erklärung enthält, die erklärt, wie dieser Beitrag die akzeptierte Antwort verbessert, bin ich geneigt, auch für die Löschung zu stimmen.
Popnoodles
1
@popnoodles, es ist okay, aber wiederhole es nie.
Yip Man WingChun