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

Question

假设我们有这个模板：

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

soSomething不会在中间点击时调用。我怎么解决这个问题？

Answer 1

我通过使用middleclick侦听mouseup事件的小型自定义指令解决了此问题，因为在我的示例中（在macOS上），clickHostListener不会在单击中触发。

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>

Answer 2

这应该有效

<div class="myClass" (click)="$event.which == 2 ? doSomething($event) : null">

另请参阅使用中键单击触发 onclick 事件

更新 2/2018

当我发布上面的答案时，我正在一台 Linux 机器上工作，它对我有用。

现在我在 Mac 上，除了鼠标左键之外，我无法获取其他任何内容的单击事件。

您可以自己尝试使用

StackBlitz 示例

也可以看看

• https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which
• https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
• https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons