如下圖所示：這個 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 动作是由键盘还是鼠标触发的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。