Answers:
如果您希望能够将此添加到任何元素而不必一遍又一遍地复制/粘贴相同的代码,则可以指定一条指令来执行此操作。它很简单,如下所示:
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>
@HostListener("mousedown", ["$event"]) public onMousedown(event: any): void { event.stopPropagation(); }
最简单的方法是在事件处理程序上调用停止传播。$event
在Angular 2中的工作原理相同,并包含进行中的事件(通过鼠标单击,鼠标事件等):
(click)="onEvent($event)"
在事件处理程序上,我们可以在那里停止传播:
onEvent(event) {
event.stopPropagation();
}
<button confirmMessage="are you sure?" (click)="delete()">Delete</button>
,然后在我的指令中:(click)="confirmAction($event)
;然后confirmAction(event) { event.stopPropagation(); }
;
event
在处理程序函数中进行处理的时间stopPropogation()
不可用。我必须在标记中正确执行:`(click)=“ foo(); $ event.stopPropogation()”
调用stopPropagation
该事件可防止传播:
(event)="doSomething($event); $event.stopPropagation()"
为了preventDefault
刚回来false
(event)="doSomething($event); false"
;
结尾。我会改变的。
false
<3
从@AndroidUniversity添加到答案。在一行中,您可以这样编写:
<component (click)="$event.stopPropagation()"></component>
如果您处于绑定到事件的方法中,则只需返回false:
@Component({
(...)
template: `
<a href="https://stackoverflow.com/test.html" (click)="doSomething()">Test</a>
`
})
export class MyComp {
doSomething() {
(...)
return false;
}
}
false
调用preventDefault
没有stopPropagation
。
preventDefault
已被调用。github.com/angular/angular/blob/...,github.com/angular/angular/blob/...
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)
}
<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>
打字稿
public selectEmployeeFromList(e) {
e.stopPropagation();
e.preventDefault();
console.log("This onClick method should prevent routerLink from executing.");
return false;
}
但是它不会禁用routerLink的执行!
在函数之后添加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 StopPropagationDirective 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']" />