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.

Wildeyed

Possible duplicate of Middle button click event with a working accepted answer – Cider

Not a duplicate. The linked question is tagged jquery. This is tagged reactjs. React uses its own synthetic events. – Thaumaturge

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.

Heer

click !== mousedown - they are completely different events with completely different behavior. Use onAuxClick instead. – Contravene

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

Germander

onAuxClick={(e) => e.button === 1 && this.onWheelClick(... – Muniment

Answer 3

You can add a mouseDown event and then detect the middle button click like:

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

You code might look like:

class App extends React.Component {
   constructor() {
     super();

     this.onMouseDown = this.onMouseDown.bind(this);
   }
   componentDidMount() {
       document.addEventListener('mousedown', this.onMouseDown);
   }
   componentWillUnmount() {
       document.removeEventListener('mousedown', this.onMouseDown);
   }
   onMouseDown(event) {
       if (event.button === 1) {
          // do something on middle mouse button click
       }
   }
   render() {
     // ...
   }
}

You can find more information on MouseEvent.button here: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

Be careful. Using mousedown won't always get you the behavior you want. A "click" is both a mousedown and a mouseup where the x and y values haven't changed. Ideally, your solution would store the x and y values on a mousedown and when mouseup occurs, you would measure to make sure they're in the same spot.

Even better than mousedown would be pointerdown. This configures compatibility with "touch" and "pen" events as well as "mouse" events. I highly recommend this method if pointer events are compatible with your app's compatible browsers.

Trustless

Instead of event.which, which isn't standardized, you should really be using event.button which is also part of React's proxied events like onMouseDown. On top of that, mousedown isn't the same as click because it doesn't wait for a mouseup. – Katherine

There is now an onAuxClick event in modern browsers. You can handle the middle click there, and it also handles the context menu open in new tab. For some reason I can't submit this as an answer so hopefully this helps someone. – Homey

Answer 4

You can use React Synthetic event as described below

<div tabIndex={1} onMouseDown={event => { console.log(event)}}>
    Click me
</div>

Thamos

downvoted. question is about middle click not mousedown. – Bridal

Answer 5

You can keep onClick. In React, you have access to nativeEvent property from where you can read which button was pressed:

const clickHandler = (evt) => {
  if (e.nativeEvent.button === 1) {
    ...
  }
}

return (
  <a onClick={clickHandler}>test</a>
)

Hoarsen