停止鼠标事件传播

Question

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

Answer 1

如果您希望能够将此添加到任何元素而不必一遍又一遍地复制/粘贴相同的代码，则可以创建一条指令来执行此操作。它很简单，如下所示：

import {Directive, HostListener} from "@angular/core";

@Directive({

    selector: "[click-stop-propagation]"

})

export class ClickStopPropagation

{

    @HostListener("click", ["$event"])

    public onClick(event: any): void

    {

        event.stopPropagation();

    }

}

然后只需将其添加到所需的元素上即可：

<div click-stop-propagation>Stop Propagation</div>

Answer 2

最简单的方法是在事件处理程序上调用停止传播。$event在Angular 2中的工作原理相同，并包含进行中的事件（通过鼠标单击，鼠标事件等）：

(click)="onEvent($event)"

在事件处理程序上，我们可以在那里停止传播：

onEvent(event) {

   event.stopPropagation();

}

Answer 3

如果您使用的是绑定到事件的方法，则只需返回false：

@Component({

  (...)

  template: `

    <a href="/test.html" (click)="doSomething()">Test</a>

  `

})

export class MyComp {

  doSomething() {

    (...)

    return false;

  }

}