web-dev-qa-db-fra.com

React Synthetic Event distingue les événements de clic gauche et droit

J'essaie de distinguer les clics gauche et droit dans une fonction OnClick. Mais,

var r = React.createClass({
   handleClick : function(e){
       //left click
       if(e.which==1){ 
          //Do something
       }
   },
   render : function(){
       return <p onClick={this.handleClick}>Something </p>
   }
});

Il s'avère que e.qui n'est pas défini pour les événements synthétiques. Comment puis-je distinguer les clics gauche et droit ici?

javascriptjavascript-eventsreactjs
30
Bhargav Ponnapalli

Vous pouvez aussi faire quelque chose comme ça. Avoir à la fois des gestionnaires onClick et onContextMenu

return <p onClick={this.handleClick} onContextMenu={this.handleClick}>Something </p>

Vous pouvez soit rechercher nativeEvent comme le suggère l'autre réponse, soit rechercher type. (En outre, empêchez la valeur par défaut s'il s'agit d'un clic droit.)

Utilisation de type

handleClick: function(e) {
  if (e.type === 'click') {
    console.log('Left click');
  } else if (e.type === 'contextmenu') {
    console.log('Right click');
  }
}

Utilisation de nativeEvent

handleClick: function(e) {
  if (e.nativeEvent.which === 1) {
    console.log('Left click');
  } else if (e.nativeEvent.which === 3) {
    console.log('Right click');
  }
}

Voici une démo http://jsbin.com/seyeliv/edit?html,output

42
Dhiraj

La propriété que vous recherchez est e.button ou e.buttons.

Le numéro du bouton qui a été enfoncé lorsque l'événement de la souris a été déclenché: bouton gauche = 0, bouton central = 1 (si présent), bouton droit = ​​2.
- MDN: Web/Evénements/clic

Cependant, avec ou sans réaction, je ne reçois des événements de clic qu'avec le bouton gauche de la souris (trackpad). Vous pouvez utiliser onMouseDown qui fonctionne pour moi.

Voici une démo en utilisant e.buttons. Vous souhaiterez peut-être également éviter les défauts dans onContextMenu.

14
Brigand

Utilisation:

if (e.button === 0) { // or e.nativeEvent.which === 1
    // do something on left click
}

Voici une DEMO

2
marcel