时间戳

首页 > 解决方案 > 如何知道从 mouseclick 或按下 enter 键调用了 onclick 事件

javascript - 如何知道从 mouseclick 或按下 enter 键调用了 onclick 事件

问题描述

在我的反应应用程序中，我有一个带有onclick事件的锚标记。

如果我按下选项卡并且当焦点出现在这个锚点上时，那么通过按下回车键clickMe也可以调用。

如何检查 clickMe通过鼠标单击或按回车键调用的函数内部。

我的代码如下。我已经尝试过event.type，event.keyCode但它对我不起作用。沙盒链接是https://codesandbox.io/s/react-basic-example-fpmvy

从“反应”导入反应，{组件}；

class App extends Component {
  state = {}
  clickMe = (e) => {
    console.log("I am called")
  }
  render() {
    return (
      <div className="app">
        <a href="#" onClick={(e)=>this.clickMe(e)}>Country</a>
      </div>
    );
  }
}
export default App;

标签： javascriptreactjs

解决方案

我发现区分单击是来自鼠标还是键盘的唯一 hacky 方法是使用event.screenXandevent.screenY属性。如果事件不是从屏幕触发的，则两个值都将为零。

clickMe = e => {
    console.log(e.screenX, e.screenY);
    if (e.screenX === 0 && e.screenY === 0) {
      // event not triggered from the screen.
      console.log("not from screen");
    } else {
      // clicked by the mouse.
    }
  };

这是一个代码框示例

推荐阅读