angular - angular - 停止鼠标事件传播

阻止鼠标事件在Angular2中传播的最简单方法是什么? 我应该通过特殊$event对象,还是自己调用stopPropagation(),有没有其它方法? 例如,在Meteor中,我可以简单地从事件处理程序返回false。

时间:


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>



最简单的方法是在事件处理程序上调用停止propagation ,$event在Angular 2中的工作方式相同,并包含正在进行的事件(鼠标单击,鼠标事件等):


(click)="onEvent($event)"



在事件处理程序上,我们可以停止传播:


onEvent(event) {


 event.stopPropagation();


}



在事件上调用stopPropagation可防止传播:


(event)="doSomething($event); $event.stopPropagation()"



对于preventDefault只返回false


(event)="doSomething($event); false"



在单行中,你可以像这样编写它:


<component (click)="$event.stopPropagation()"></component>



如果你在绑定到事件的方法中,只需使用return false :


@Component({


 (...)


 template: `


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


 `


})


export class MyComp {


 doSomething() {


 (...)


 return false;


 }


}



在函数后添加false将停止事件传播


<a (click)="foo(); false">click with stop propagation</a>



...