有什么方法可以检测 React JS 中的中间点击吗？

Question

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

在 Chrome React 的合成点击事件中确实显示了被点击的按钮 ->

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

您可以添加一个 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 并不总是能让你得到你想要的行为。 "click" 既是 mousedown 又是 mouseup，其中 x 和 y 值没有改变。理想情况下，您的解决方案会将 x 和 y 值存储在 mousedown 上，当 mouseup 出现时，您将进行测量以确保它们位于同一位置。

甚至比 mousedown 更好的是 pointerdown。这配置了与 "touch" 和 "pen" 事件以及 "mouse" 事件的兼容性。如果指针事件与您应用的兼容浏览器兼容，我强烈推荐此方法。

Answer 2

您可以使用 React Synthetic 事件，如下所述

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

Answer 3

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

JS

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

JSX

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

希望对您有所帮助。

Answer 4

你可以保留onClick。在 React 中，您可以访问 nativeEvent 属性从那里您可以读取哪个按钮被按下：

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

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

Answer 5

现代的做法是通过 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>
    );
}

有什么方法可以检测 React JS 中的中间点击吗？

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

javascript

html

reactjs

mouseevent