如何用 TypeScript 代码区分一个 button 动作是由键盘还是鼠标触发的

如下图所示：这个 icon，既可以直接通过鼠标点击，又可以通过键盘 tab 键将 focus 移至其上，然后敲键盘回车键完成点击。

在代码里，如何判断这两种情形？

@HostListener('keydown.enter', ['$event'])@HostListener('keydown.space', ['$event'])handlePress(event: KeyboardEvent): void {event?.preventDefault();if (event?.target === this.element.nativeElement && !this.isOpen) {this.eventSubject.next(PopoverEvent.OPEN_BY_KEYBOARD);} else if (this.isOpen) {this.eventSubject.next(PopoverEvent.CLOSE_BUTTON_KEYDOWN);}}

通过 @HostListener 监听指令宿主元素即 button 元素的 keydown.enter 和 keydown.space 事件。如果发生，说明键盘被按下来了。

这里的事件类型为 KeyboardEvent.

keydown.tab 和 keydown.shift.tab 说明 tab 键被按下。

如果是鼠标点击，事件名称为 click，对应的事件对象类型为 MouseEvent.

更多Jerry的原创文章，尽在：“汪子熙”:

总结

以上是生活随笔为你收集整理的如何用 TypeScript 代码区分一个 button 动作是由键盘还是鼠标触发的的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。