javascript - 如何检测 Angular2 中 div 的中间点击？

Question

假设我们有这个模板:

<div class="myClass" (click)="doSomething($event)">

soSomething 不会在中键点击时被调用。我该如何解决这个问题？

Answer 1

我通过使用一个小的自定义 middleclick 指令解决了这个问题，该指令正在监听 mouseup 事件，因为在我的示例(在 macOS 上)中 click HostListener 不会在中键点击时触发。

import { Directive, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({ selector: '[middleclick]' })
export class MiddleclickDirective  {
  @Output('middleclick') middleclick = new EventEmitter();

  constructor() {}

  @HostListener('mouseup', ['$event'])
  middleclickEvent(event) {
    if (event.which === 2) {
      this.middleclick.emit(event);
    }
  }
}

有了这个你可以使用类似的东西

<button (middleclick)="doSomething()">Do something</button>