在 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