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

Question

I made a custom directive in which I want to catch middle mouse button click events. I figured it'd just be a normal click event, and to go from there but it's only fired when the left mouse button is clicked.

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

Any suggestions?

Thanks!

Answer 1

You need to handle the mouseup or mousedown event which capture all mouse clicks, rather than just the left button.

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

The $event variable returned will be a MouseEvent . You can check the which property to see which button was pressed. If $event.which === 2 then it will be the middle mouse button.

Here is a live example I created so you can see it in action.

Answer 2

Try mousedown event and catch the middle button click

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

Answer 3

Updated answer for 2020

The "which" attribute from MouseEvent been deprecated. The currently up to date way to figure out which button was clicked is the "button" attribute.

assuming "event" is a "MouseEvent", event.button is a number which can be interpreted as follows:

• 0: Main button pressed, usually the left button or the un-initialized state
• 1: Auxiliary button pressed, usually the wheel button or the
  middle button (if present)
• 2: Secondary button pressed, usually the right button
• 3: Fourth button, typically the Browser Back button
• 4: Fifth button, typically the Browser Forward button

Adapting from @alex-wiese's answer, and depending on the input device, you'd get:

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

Source: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button