Is there any way to detect middle click in React JS?

Question

I am trying to find a way to detect middle click event in React JS but so far haven't succeeded in doing so.

In Chrome React's Synthetic Click event does show the button clicked ->

mouseClickEvent.button === 0 // Left

mouseClickEvent.button === 1 // Middle but it does not execute the code at all

mouseClickEvent.button === 2 // Right (There is also onContextMenu with event.preventDefault() )

Please share your views.

Answer 1

If you are using a stateless component:

JS

const mouseDownHandler = ( event ) => {
  if( event.button === 1 ) {
    // do something on middle mouse button click
  }
}

---

JSX

<div onMouseDown={mouseDownHandler}>Click me</div>

Hope this helps.

Answer 2

The modern way of doing it is through the onAuxClick event:

import Card from 'react-bootstrap/Card';
import React, { Component } from 'react';

export class MyComponent extends Component {

  onAuxClick(event) {
    if (event.button === 1) {
      // Middle mouse button has been clicked! Do what you will with it...
    }
  }
    
  render() {
    return (
      <Card onAuxClick={this.onAuxClick.bind(this)}>
      </Card>
    );
}