有没有办法检测 React JS 中的中间点击？

Question

我试图找到一种方法来检测 React JS 中的中间点击事件，但到目前为止还没有成功。

在 Chrome React 的 Synthetic Click 事件中确实显示了单击的按钮 ->

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() )

请分享您的看法。

Answer 1

如果您使用的是无状态组件：

JS

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

JSX

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

希望这可以帮助。

Answer 2

现代的方法是通过onAuxClick事件：

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

Answer 3

您可以添加一个mouseDown事件，然后检测中间按钮的点击，例如：

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

您的代码可能如下所示：

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() {
     // ...
   }
}

您可以在MouseEvent.button此处找到更多信息：https : //developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

当心。使用mousedown并不总是能让你得到你想要的行为。“点击”既是 amousedown又是 a ，mouseup其中x和 的y值没有改变。理想情况下，您的解决方案会将x和y值存储在 a 上mousedown，当mouseup发生时，您将进行测量以确保它们位于同一位置。

甚至优于mousedown会pointerdown。这配置了与“触摸”和“笔”事件以及“鼠标”事件的兼容性。如果指针事件与您应用的兼容浏览器兼容，我强烈推荐此方法。