在Angular 2中阻止鼠标事件传播的最简单方法是什么?我应该通过特殊的$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>
函数后添加false将停止事件传播
<a (click)="foo(); false">click with stop propagation</a>
这解决了我的问题,从预防一个事件被孩子们解雇:
doSmth(){
// what ever
}
<div (click)="doSmth()">
<div (click)="$event.stopPropagation()">
<my-component></my-component>
</div>
</div>
试试这个指令
@Directive({
selector: '[stopPropagation]'
})
export class StopPropagatioDirective implements OnInit, OnDestroy {
@Input()
private stopPropagation: string | string[];
get element(): HTMLElement {
return this.elementRef.nativeElement;
}
get events(): string[] {
if (typeof this.stopPropagation === 'string') {
return [this.stopPropagation];
}
return this.stopPropagation;
}
constructor(
private elementRef: ElementRef
) { }
onEvent = (event: Event) => {
event.stopPropagation();
}
ngOnInit() {
for (const event of this.events) {
this.element.addEventListener(event, this.onEvent);
}
}
ngOnDestroy() {
for (const event of this.events) {
this.element.removeEventListener(event, this.onEvent);
}
}
}
用法
<input
type="text"
stopPropagation="input" />
<input
type="text"
[stopPropagation]="['input', 'click']" />
最简单的是在事件处理程序上调用停止传播。 $event
在Angular 2中的工作方式相同,并包含正在进行的事件(通过鼠标单击,鼠标事件等):
(click)="onEvent($event)"
在事件处理程序上,我们可以阻止传播:
onEvent(event) {
event.stopPropagation();
}
在事件上调用stopPropagation
可防止传播:
(event)="doSomething($event); $event.stopPropagation()"
对于preventDefault
,只需返回false
(event)="doSomething($event); false"
加上@AndroidUniversity的答案。在一行中,您可以这样写:
<component (click)="$event.stopPropagation()"></component>
如果您在一个绑定到事件的方法中,只需返回false:
@Component({
(...)
template: `
<a href="/test.html" (click)="doSomething()">Test</a>
`
})
export class MyComp {
doSomething() {
(...)
return false;
}
}
我不得不使用stopPropigation
和preventDefault
以防止按钮扩展其位于上方的手风琴项目。
所以...
@Component({
template: `
<button (click)="doSomething($event); false">Test</button>
`
})
export class MyComponent {
doSomething(e) {
e.stopPropagation();
// do other stuff...
}
}
IE(Internet Explorer)没有任何效果。我的测试人员能够通过单击其后面的按钮上的弹出窗口来打破我的模态。所以,我听了我的模态屏幕div点击并强制重新聚焦在弹出按钮上。
<div class="modal-backscreen" (click)="modalOutsideClick($event)">
</div>
modalOutsideClick(event: any) {
event.preventDefault()
// handle IE click-through modal bug
event.stopPropagation()
setTimeout(() => {
this.renderer.invokeElementMethod(this.myModal.nativeElement, 'focus')
}, 100)
}
我刚刚检查了Angular 6应用程序,event.stopPropagation()在事件处理程序上工作,甚至没有传递$ event
(click)="doSomething()" // does not require to pass $event
doSomething(){
// write any code here
event.stopPropagation();
}
<a href="#" onclick="return yes_js_login();">link</a>
yes_js_login = function() {
// Your code here
return false;
}
<a class="list-group-item list-group-item-action" (click)="employeesService.selectEmployeeFromList($event); false" [routerLinkActive]="['active']" [routerLink]="['/employees', 1]">
RouterLink
</a>
TypeScript
public selectEmployeeFromList(e) {
e.stopPropagation();
e.preventDefault();
console.log("This onClick method should prevent routerLink from executing.");
return false;
}
但它不会禁用routerLink的执行!