停止鼠标事件传播

在Angular中停止鼠标事件传播的最简单方法是什么?

我是否应该传递特殊的$event对象并自己调用stopPropagation()，或者有其他方法。

例如，在Meteor中，我可以简单地从事件处理程序返回false。

329288 次浏览
小开

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

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

对于preventDefault只返回false

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

事件绑定允许执行多个语句和表达式，并按顺序执行(像*.ts文件一样由;分隔)。
如果最后一个表达式的结果为假，将导致preventDefault被调用。所以要小心表达式返回的内容(即使只有一个)

小开

如果你在一个绑定到事件的方法中，简单地返回false:

@Component({
(...)
template: `
<a href="/test.html" (click)="doSomething()">Test</a>
`
})
export class MyComp {
doSomething() {
(...)
return false;
}
}
小开

最简单的方法是在事件处理程序上调用停止传播。$event在Angular 2中的工作原理是一样的，它包含了正在进行的事件(通过它鼠标点击、鼠标事件等):

(click)="onEvent($event)"

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

onEvent(event) {
event.stopPropagation();
}
小开

我必须stopPropagation和preventDefault，以防止一个按钮展开一个手风琴项目，它位于上面。

所以…

@Component({
template: `
<button (click)="doSomething($event); false">Test</button>
`
})
export class MyComponent {
doSomething(e) {
e.stopPropagation();
// do other stuff...
}
}
小开
最佳答案

如果您希望能够将此添加到任何元素，而不必一遍又一遍地复制/粘贴相同的代码，您可以制作一个指令来完成此操作。如下图所示:

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>
小开

用JavaScript禁用href链接

<a href="#" onclick="return yes_js_login();">link</a>


yes_js_login = function() {
// Your code here
return false;
}

它应该如何在TypeScript和Angular中工作(我的版本:4.1.2)

模板 
<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的执行!

小开

补充来自@AndroidUniversity的答案。在单行中你可以这样写:

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

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)
}
小开

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

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

我刚刚检查了一个Angular 6应用程序，event. stoppropagation()在一个事件处理程序上工作，甚至不需要传递$event

(click)="doSomething()"  // does not require to pass $event




doSomething(){
// write any code here


event.stopPropagation();
}
小开

这解决了我的问题，从防止一个事件被一个孩子触发:

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']" />
小开

这招对我很管用:

mycomponent.component.ts:

action(event): void {
event.stopPropagation();
}

mycomponent.component.html:

<button mat-icon-button (click)="action($event);false">Click me !<button/>
小开

我使用

<... (click)="..;..; ..someOtherFunctions(mybesomevalue); $event.stopPropagation();" ...>...

简而言之，只需用';'分隔其他事物/函数调用，并添加$event.stopPropagation()

小开

提供的大多数解决方案都适用于Angular 11以上的版本，对于Angular 11或以下版本，我找到了一个可以使用的变通方案:

export class UiButtonComponent implements OnInit, OnDestroy {


@Input() disabled = false;


clickEmitter: Subject<any> = new Subject();


constructor(private elementRef: ElementRef) { }


ngOnInit(): void {
this.elementRef.nativeElement.eventListeners()
.map(listener => this.clickEmitter.pipe(filter(event => Boolean(event))).subscribe(event => listener(event)));
this.elementRef.nativeElement.removeAllListeners();
this.elementRef.nativeElement.addEventListener('click', (event) => {
if (!this.disabled) {
this.clickEmitter.next(event);
}
});
}


ngOnDestroy(): void {
this.clickEmitter.complete();
}
}

我基本上把当前组件的每个侦听器都放在Observable上，然后，我只注册一个侦听器，并在那里管理操作。

上面的例子是在给定一个布尔变量的情况下禁用按钮上的click事件。


提交答案