web-dev-qa-db-ja.com

React合成イベントは左クリックイベントと右クリックイベントを区別します

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>
   }
});

Synthetic Eventsでは未定義のe。が判明します。ここで左クリックと右クリックを区別するにはどうすればよいですか？

javascriptjavascript-eventsreactjs
30
Bhargav Ponnapalli

このようなこともできます。 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

42
Dhiraj

お探しのプロパティはe.buttonまたはe.buttons。

マウスイベントが発生したときに押されたボタン番号：左ボタン= 0、中央ボタン= 1（存在する場合）、右ボタン= 2。
– MDN：Web/Events/click

ただし、反応の有無にかかわらず、クリックイベントはマウスの左ボタン（トラックパッド）でのみ発生します。私に役立つonMouseDownを使用できます。

これは デモ を使用したe.buttons。 onContextMenuでDefaultを防ぐこともできます。

14
Brigand

使用する：

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

ここにデモがあります

2
marcel