Question

我想通过单击鼠标中键在同一选项卡中打开一个新页面。

这就是我想要做的... 我有一个包含图像和页脚的卡片组件。当我单击图像上的鼠标中键时，应在同一选项卡中打开一个新页面。如果我单击鼠标左键，它将在同一选项卡中打开新页面。但是，单击鼠标中键会在新选项卡中打开页面...我想防止这种情况。下面是代码。

render = () => {
    return (
        <div className="card">
            <Link style={{textDecoration: 'none'}} to="/card/new">
            <div>
                <Image
                />
            </div>
            </Link>
            <div className="footer">
                <div className="info">
                    <h4>{model.modelname}</h4>
                </div>
            </div>
        </div>
          );
};

有人可以指导我如何防止在鼠标中键单击时在新标签页中打开页面吗？谢谢。

Answer 1

您可以添加mouseDown事件，然后检测类似单击的中间按钮

handleMouseDown = (e) => {
   if(e.which === 2) {
      // do something on middle mouse button click
   }
}

您的代码可能看起来像

class MyComponent extends Component {
   handleMouseDown() {
       if(e.which === 2) {
          // do something on middle mouse button click
          // like this.props.history.push('/card/new');
       }
   }

   render() {
     <div style={{textDecoration: 'none'}} onMouseDown={this.handleMouseDown} />
   }
}

export default withRouter(MyComponent);

如何在单击鼠标中键时不打开新选项卡？

1 个答案: