Comment obtenez-vous le bouton de la souris à l'aide de jQuery?
$('div').bind('click', function(){ alert('clicked'); });
Ceci est déclenché à la fois par le clic droit et le clic droit, quelle est la manière d'attraper le clic droit de la souris? Je serais heureux si quelque chose comme ci-dessous existe:
$('div').bind('rightclick', function(){ alert('right mouse button is pressed'); });
À partir de jQuery version 1.1.3, event.which
normalise event.keyCode
et event.charCode
afin de ne pas vous soucier des problèmes de compatibilité du navigateur. Documentation sur event.which
event.which
donnera respectivement 1, 2 ou 3 pour les boutons gauche, moyen et droit de la souris, respectivement:
$('#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!'); } });
Edit : J'ai changé pour fonctionner pour les éléments ajoutés dynamiquement en utilisant .on()
dans jQuery 1.7 ou supérieur:
$(document).on("contextmenu", ".element", function(e){ alert('Context Menu event has fired!'); return false; });
Demo: jsfiddle.net/Kn9s7/5
[Début de la publication originale] C'est ce qui a fonctionné pour moi:
$('.element').bind("contextmenu",function(e){ alert('Context Menu event has fired!'); return false; });
Dans le cas où vous êtes dans des solutions multiples ^^
Edit : Tim Down soulève un bon point pour que ce ne soit pas toujours un right-click
qui déclenche l'événement contextmenu
, mais aussi lorsque la touche de menu contextuel est pressée (ce qui est sans doute un remplacement pour un right-click
)
Vous pouvez facilement indiquer quel bouton de la souris a été pressé en cochant la propriété de l'objet événement sur les événements de la souris:
/* 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! */ } });
Vous pouvez également bind
à contextmenu
et return false
:
$('selector').bind('contextmenu', function(e){ e.preventDefault(); //code return false; });
Demo: http://jsfiddle.net/maniator/WS9S2/
Ou vous pouvez créer un plugin rapide qui fait la même chose:
(function( $ ) { $.fn.rightClick = function(method) { $(this).bind('contextmenu rightclick', function(e){ e.preventDefault(); method(); return false; }); }; })( jQuery );
Demo: http://jsfiddle.net/maniator/WS9S2/2/
En utilisant .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.
$("#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"); } });
$.event.special.rightclick = { bindType: "contextmenu", delegateType: "contextmenu" }; $(document).on("rightclick", "div", function() { console.log("hello"); return false; });
Il y a beaucoup de très bonnes réponses, mais je veux juste aborder une différence majeure entre IE9 et IE <9 lors de l'utilisation du event.button
.
Selon l'ancienne spécification Microsoft for event.button
les codes diffèrent de ceux utilisés par W3C. Le W3C ne considère que 3 cas:
event.button === 1
event.button === 3
event.button === 2
Dans les Explorateurs d'Internet plus anciens, Microsoft lance un peu le bouton pressé et il y a 8 cas:
event.button === 0
ou 000 event.button === 1
ou 001 event.button === 2
ou 010 event.button === 3
ou 011 event.button === 4
ou 100 event.button === 5
ou 101 event.button === 6
ou 110 event.button === 7
ou 111 Malgré le fait que c'est théoriquement, comment Internet fonctionne, aucun Internet Explorer n'a supporté les cas de deux ou trois boutons simultanément pressés. Je le mentionne parce que la norme W3C ne peut même pas théoriquement supporter cela.
Il me semble qu'une légère adaptation de la réponse de TheVillageIdiot serait plus propre:
$('#element').bind('click', function(e) { if (e.button == 2) { alert("Right click"); } else { alert("Some other click"); } }
EDIT: JQuery fournit un attribut e.which
, renvoyant 1, 2, 3 pour gauche, milieu et clic droit, respectivement. Ainsi, vous pouvez également utiliser if (e.which == 3) { alert("right click"); }
if (e.which == 3) { alert("right click"); }
Voir aussi: réponses à "Déclencher l'événement onclick en utilisant le clic central"
event.which === 1
garantit que c'est un clic gauche (lors de l'utilisation de jQuery).
Mais vous devriez également penser aux touches modificatrices: ctrl cmd shift alt
Si vous n'êtes intéressé que par des clics de gauche simples et non modifiés, vous pouvez faire quelque chose comme ceci:
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... } });
Si vous êtes à la recherche de "Better Javascript Mouse Events" qui permettent
Jetez un oeil à ce javascript normal de navigateur croisé qui déclenche les événements ci-dessus et supprime le travail de la tête de tête. Il suffit de copier et de le coller dans la tête de votre script, ou de l'inclure dans un fichier dans <head>
de votre document. Ensuite, liez vos événements, reportez-vous au prochain bloc de code ci-dessous qui montre un exemple jquery de capture des événements et de déclenchement des fonctions qui leur sont assignées, mais cela fonctionne également avec la liaison javascript normale.
Si vous souhaitez le voir, regardez jsFiddle: 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); })();
Meilleur Mouse Click Events Example (utilise jquery pour la simplicité, mais ce qui précède fonctionnera dans le navigateur croisé et déclenchera les mêmes noms d'événement, IE utilise avant les noms)
<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>
Et pour ceux qui ont besoin de la version minifiée …
!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)}();
$(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; } });
Avec jquery, vous pouvez utiliser le event object type
jQuery(".element").on("click contextmenu", function(e){ if(e.type == "contextmenu") { alert("Right click"); } });
Il y a aussi un moyen de le faire sans JQuery!
regarde ça:
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"); });
$.event.special.rightclick = { bindType: "contextmenu", delegateType: "contextmenu" }; $(document).on("rightclick", "div", function() { console.log("hello"); return false; });