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，则将是鼠标中键。

Here is a live example是我创建的，以便您可以看到它的实际效果。

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的“哪个”属性。找出按钮被点击的最新方法是“按钮”属性。

假设“事件”是“ MouseEvent”，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

在Angular 6指令中单击鼠标中键

3 个答案: