Javascript 如何监听Angular 2元素上的单击并获取事件对象？

我有一个指令，我将在某些锚元素上应用到

preventDefault（）

我试图在jQuery中做的基本上是这样的：

$('[my-directive]').click(function (e) {
    e.preventDefault();
});

---

我怎样才能做到这一点呢？我有Angular 4.1。

您还需要指定

参数

：

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  @HostListener('click', ['$event']) /* note args array */
  onClick(event) {
    console.log(event);
    event.preventDefault();
  }
}

---

查看一个示例Plunkr：（打开控制台，然后单击“Hello Angular”）。

event.preventDefault（）

似乎不起作用。它是一个

MouseEvent

。如何停止页面更改？@Jeff是的，这是一个

鼠标事件

，你点击了它。你想阻止什么？例如，我已经更新了Plunkr，以显示阻止

a

点击导致导航。明白了。在自定义指令之前，我有

routerLink

指令，因此该指令优先。谢谢你的帮助！更正：无论顺序如何，使用

routerLink

指令都会覆盖它。

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  @HostListener('click', ['$event']) /* note args array */
  onClick(event) {
    console.log(event);
    event.preventDefault();
  }
}