React Synthetic Event различает события Left и Right click

Я пытаюсь различать левый и правый щелчки в функции OnClick. Но,

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

Выключает e.which undefined для Синтетических событий. Как я могу различать левый и правый клики здесь?

Ответы

Ответ 1

Вы тоже можете сделать что-то подобное. У обоих обработчиков onClick и onContextMenu

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

Вы можете либо проверить nativeEvent, как предлагает другой ответ, либо проверить type. (Кроме того, предотвратить по умолчанию, если это щелчок правой кнопкой мыши.)

Используя type

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

Используя nativeEvent

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

Вот демонстрационная версия http://jsbin.com/seyeliv/edit?html,output

Ответ 2

Свойство, которое вы ищете, это e.button или e.buttons.

Номер кнопки, который был нажат при запуске события мыши: Левая кнопка = 0, средняя кнопка = 1 (если есть), правая кнопка = 2.
_{- MDN: Веб/События/клик}

Однако, с или без ответа, я получаю клики только левой кнопкой мыши (трекпад). Вы можете использовать onMouseDown, который работает для меня.

Здесь demo, используя e.buttons. Возможно, вы захотите также предотвратить детекцию в onContextMenu.

Ответ 3

Использование:

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

Вот ДЕМО