Détection bouton gauche de la souris presse

Question

Je déteste ce désordre avec les boutons de la souris créés par W3C et MS! Je veux savoir si le bouton gauche de la souris est pressé quand je reçois un événement mousedown.

J'utilise ce code

// Return true if evt carries left mouse button press 
function detectLeftButton(evt) { 
    // W3C 
    if (window.event == null) { 
    return (evt.button == 0) 
    } 
    // IE 
    else { 
    return (evt.button == 1); 
    } 
} 

Cependant, il ne fonctionne pas dans Opera et Chrome, car il se trouve que window.event existe là aussi.

Alors qu'est-ce que je fais? J'ai une certaine détection de navigateur, mais nous savons tous qu'il ne peut pas être invoqué avec tout le masquage que certains navigateurs font ces derniers temps. Comment puis-je détecter le bouton gauche de la souris de manière FIABLE?

Answer 1

Réponse mise à jour. Ce qui suit détectera si la gauche et seul le bouton gauche de la souris est pressé:

function detectLeftButton(evt) { 
    evt = evt || window.event; 
    if ("buttons" in evt) { 
     return evt.buttons == 1; 
    } 
    var button = evt.which || evt.button; 
    return button == 1; 
} 

Pour plus d'informations sur la gestion des événements de souris en JavaScript, essayez http://unixpapa.com/js/mouse.html

Answer 2

Il y a maintenant un W3C standardevent.buttons propriété prise en charge par IE9 in standards mode et Gecko 15+.

La W3C completely stuffed la propriété event.button, donc pour un niveau event.button de navigateur compatible est 0, mais pour les navigateurs créés avant la norme, event.button est 1.

donc le code doit éviter d'utiliserevent.button sauf pour les navigateurs plus anciens. Le code suivant devrait fonctionner:

function detectLeftButton(event) { 
    if ('buttons' in event) { 
     return event.buttons === 1; 
    } else if ('which' in event) { 
     return event.which === 1; 
    } else { 
     return event.button === 1; 
    } 
} 

Answer 3

Vous pouvez utiliser le code- suivant

onmouseup="if(window.event.which==1){//code for left click} 
      else if(window.event.which==3){//code for right click}" 

Answer 4

Même si event.buttons travaille maintenant dans Chrome, Safari ne supporte toujours pas. Une solution consiste à utiliser onmousedown et onmouseup au document ou niveau parent comme: onmousedown = "bMouseDown = true" onmouseup = "bMouseDown = false"

Answer 5

// 0 left, 2 right, 1 middle, other.. extra buttons, gaming mouses 

var buttonsArray = [false, false, false, false, false, false, false, false, false]; 
var mousePressed = false; 

document.onmousedown = function(e) { 
    buttonsArray[e.button] = true; 
    mousePressed = true; 
}; 

document.onmouseup = function(e) { 
    buttonsArray[e.button] = false; 
    mousePressed = false; 
}; 

document.oncontextmenu = function() { 
    return false; 
} 

Explication: Lorsque la souris est en baisse, nous changeons à true bouton appuyé dans notre tableau de boutons. Lorsque la souris est en haut, nous changeons à false le bouton appuyé à false.

Maintenant nous pouvons établir quel bouton est pressé avec plus de précision, mais nous avons un problème de clic droit .. parce qu'avec ce bouton nous ouvrons un menu contextuel au navigateur, et cela échappe à notre contrôle ... donc, nous désactivons le contexte menu afin de détecter correctement le clic droit. Si nous ne faisons pas cela, nous devons aussi résoudre le clic gauche ... et c'est une complication qui échappe à cette réponse. Pour simplifier les choses, nous pouvons ajouter une autre variable mousePressed et marquer si la souris est en bas ou en haut.

Fonctionne parfaitement sur chrome, je ne l'ai pas testé dans un autre navigateur mais je suppose que c'est ok dans firefox et l'opéra aussi ... IE ??? Je ne me soucie pas d'IE.

Profitez-en!

Answer 6

Travail hors de robocat's answer, vous pouvez facilement créer une extension jQuery comme suit

$.fn.mouseButton = function() { 
    if (!(this instanceof MouseEvent || this[0] instanceof MouseEvent)) return null; 
    var e = this[0] || window.event; 
    return e.buttons || e.which || e.button; 
}