停止鼠标事件传播

Question

停止鼠标事件在Angular 2中传播的最简单方法是什么？我应该传递特殊$event对象并给stopPropagation()自己打电话还是有其他方法。例如，在Meteor中，我可以简单地false从事件处理程序中返回。

Answer 1

如果您希望能够将此添加到任何元素而不必一遍又一遍地复制/粘贴相同的代码，则可以创建一条指令来执行此操作。它很简单，如下所示：import {Directive, HostListener} from "@angular/core";@Directive({&nbsp; &nbsp; selector: "[click-stop-propagation]"})export class ClickStopPropagation{&nbsp; &nbsp; @HostListener("click", ["$event"])&nbsp; &nbsp; public onClick(event: any): void&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; event.stopPropagation();&nbsp; &nbsp; }}然后只需将其添加到所需的元素上即可：<div click-stop-propagation>Stop Propagation</div>

Answer 2

最简单的方法是在事件处理程序上调用停止传播。$event在Angular 2中的工作原理相同，并包含进行中的事件（通过鼠标单击，鼠标事件等）：(click)="onEvent($event)"在事件处理程序上，我们可以在那里停止传播：onEvent(event) {&nbsp; &nbsp;event.stopPropagation();}

Answer 3

如果您使用的是绑定到事件的方法，则只需返回false：@Component({&nbsp; (...)&nbsp; template: `&nbsp; &nbsp; <a href="/test.html" (click)="doSomething()">Test</a>&nbsp; `})export class MyComp {&nbsp; doSomething() {&nbsp; &nbsp; (...)&nbsp; &nbsp; return false;&nbsp; }}