角度单击事件识别是鼠标单击还是键盘输入键事件答案

【问题标题】：Angular click event identify whether it is mouse click or keyboard enter key event角度单击事件识别是鼠标单击还是键盘输入键事件
【发布时间】：2020-03-18 09:34:21
【问题描述】：

我有以下html代码，我需要识别事件是鼠标点击事件还是键盘回车键事件。

HTML代码

    <button mat-raised-button class="btn-enter-troubleshooting-attempts" 
(click)="triggerLog($event)"> Click/Enter </button>

键入脚本

triggerLog(e): void {
    console.log('Log Attempt', e);
   //do some function based on the event
  }

【问题讨论】：

标签： javascript angular

【解决方案1】：

您可以添加(keydown)="triggerLog($event)"，然后检查app.component.ts中是否按下了Enter键：

triggerLog(e): void { 
  console.log('Log Attempt', e);

  if(e.code === 13) {
    // Enter pressed.
  }
}

如果你想收听keypress 或keydown 没有选择：

ngOnInit(): void {
  window.addEventListener('keydown', this.triggerLog, true);
}

您可以在https://keycode.info/查看键盘代码。

【讨论】：

如果我们写(keypress)然后鼠标点击不起作用，那么如何处理这种情况
向ngOnInit添加窗口事件
``` ngOnInit(): void { window.addEventListener('keydown', this.triggerLog, true) } ```
请注意，keypress 和 e.keyCode 都已弃用，因此您可能应该改用 e.key 或 e.code。此外，这一行是错误的：e.code === 13。您有 4 个替代方案：e.key === 'Enter'、e.code === 'Ender'、e.which === 13（已弃用）或 e.keyCode === 13（已弃用）。
另外，看看这个其他工具keyjs.dev，它有更多关于不同键盘事件及其属性的信息。 ?

【解决方案2】：

使用 (keyup.enter) 绑定回车键。使用 (click) 监听鼠标点击。

查看link

【讨论】：

(click) 可以处理鼠标点击和回车键事件，但(keyup.enter) 只能在按下回车键时执行。所以你想说(click)="triggerLog($event)" (keyup.enter) = "triggerLog($event)"我需要同时使用两者
从技术上讲，经过考虑，用户应该无法在按钮元素上按 Enter 键。如果用户能够通过按 Tab 键导航到按钮，那么您始终可以在按钮上设置 tabIndex="-1" 以跳过该按钮上的选择。

【解决方案3】：

你只需要询问event.clientX，如果有任何值就是click，否则就是ENTER

<form [formGroup]="form">
    <input formControlName="name">
    <button type="submit" (click)="triggerLog($event)">click</button>
</form>

  form=new FormGroup({
    name:new FormControl('')
  })
  triggerLog(event)
  {
    console.log(event.clientX)
  }

见simple stackblitz

【讨论】：