Réaction événement synthétique distinguer les événements de clic droit et gauche
j'essaie de distinguer entre les clics de gauche et de droite 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>
}
});
3 réponses
Vous pouvez faire quelque chose comme cela aussi. Avoir à la fois onClick et onContextMenu handlers
return <p onClick={this.handleClick} onContextMenu={this.handleClick}>Something </p>
Vous pouvez vérifier nativeEvent comme l'autre réponse suggère ou vérifier type. (Aussi, de prévenir par défaut si c'est un clic droit.)
en utilisant type
handleClick: function(e) {
if (e.type === 'click') {
console.log('Left click');
} else if (e.type === 'contextmenu') {
console.log('Right click');
}
}
en utilisant 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,sortie
La propriété que vous recherchez est e.button ou e.buttons.
le numéro du bouton qui a été pressé lorsque l'événement de la souris a été tiré: bouton gauche=0, bouton du milieu=1 (si présent), bouton droit=2.
-MDN:Web/Événements/cliquez sur
cependant, avec ou sans react, Je n'obtiens que des clics avec le bouton gauche de la souris (trackpad). Tu pourrais utiliser une robe à souris qui marche pour moi.
Voici un démo en utilisant e.buttons. Vous pouvez vouloir prévenir le défaut dans onContextMenu aussi.
Utilisation:
if (e.button === 0) { // or e.nativeEvent.which === 1
// do something on left click
}