So unterscheiden Sie mit jQuery zwischen Links- und Rechtsklick

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');
});

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!');
    }
});

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).

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! */
    }
});

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/

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

$.event.special.rightclick = {
    bindType: "contextmenu",
    delegateType: "contextmenu"
};

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

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

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.

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"

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...
  }
});

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)}();

$("body").on({
    click: function(){alert("left click");},
    contextmenu: function(){alert("right click");}   
});

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

    }


});

Mit jquery können Sie verwenden event object type

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

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
    }
});

$.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");
}); 

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

    $.event.special.rightclick = {
     bindType: "contextmenu",
        delegateType: "contextmenu"
      };

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