在 Angular 6 指令中捕獲鼠標中鍵單擊

Question

我做了一個自定義指令，我想在其中捕獲鼠標中鍵單擊事​​件。 我認為這只是一個普通的點擊事件，然后從那里開始，但只有在單擊鼠標左鍵時才會觸發。

  @HostListener('click', ['$event']) onClick($event){
    console.info('Click event fired', $event);
  }

有什么建議？

謝謝！

Answer 1

您需要處理捕獲所有鼠標點擊的mouseup或mousedown事件，而不僅僅是左鍵。

  @HostListener('mouseup', ['$event']) onClick($event){
    console.info('Click event fired', $event);
    if($event.which === 2)
       console.info('Middle mouse button clicked');
  }

返回的$event變量將是MouseEvent 。 您可以檢查which屬性以查看按下了哪個按鈕。 如果$event.which === 2那么它將是鼠標中鍵。

這是我創建的一個活生生的例子，所以你可以看到它的實際效果。

Answer 2

嘗試 mousedown 事件並捕捉中間按鈕的點擊

    @HostListener('mousedown', ['$event']) onClick(e) {
        console.log(e.which)
        if (e.which === 2) {
          console.log('Middle button ==> ', e.which)
          e.preventDefault();
        }
      }

Answer 3

2020 年的更新答案

MouseEvent 中的“which”屬性已被棄用。 當前確定點擊了哪個按鈕的最新方法是“按鈕”屬性。

假設“事件”是“鼠標事件”，則 event.button 是一個數字，可以解釋如下：

• 0：主鍵按下，一般為左鍵或未初始化狀態
• 1：輔助按鈕按下，通常是滾輪按鈕或
  中間按鈕（如果有）
• 2：副鍵按下，通常是右鍵
• 3：第四個按鈕，通常是瀏覽器后退按鈕
• 4：第五個按鈕，通常是瀏覽器前進按鈕

改編自@alex-wiese 的答案，根據輸入設備，您會得到：

@HostListener('mouseup', ['$event']) onClick($event){
    console.info('Click event fired', $event);
    if($event.button === 1)
       console.info('Middle mouse button clicked');
}

來源： https : //developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button