如何检测Angular2中div的中间点击?

时间:2016-10-18 16:01:30

标签: javascript angular

我们有这个模板:

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

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

2 个答案:

答案 0 :(得分:5)

我通过使用一个小的自定义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>

答案 1 :(得分:4)

这应该有效

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

另见Triggering onclick event using middle click

更新2/2018

当我发布上述答案时,我正在使用Linux机器,它对我有用。

现在我在Mac上,除了鼠标左键,我无法获得点击事件。

您可以使用

自行尝试

StackBlitz example

另见