在Angular 2中阻止鼠标事件传播的最简单方法是什么?我应该传递特殊的 $event 对象并自己调用 stopPropagation() 或者还有其他方法 . 例如在Meteor中我可以简单地从事件处理程序返回 false .
$event
stopPropagation()
false
最简单的是在事件处理程序上调用停止传播 . $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 以防止按钮扩展它位于上方的手风琴项目 .
stopPropigation
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>
<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的执行!
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) }
8 回答
最简单的是在事件处理程序上调用停止传播 .
$event
在Angular 2中的工作方式相同,并包含正在进行的事件(通过鼠标单击,鼠标事件等):在事件处理程序上,我们可以阻止传播:
在事件上调用 stopPropagation 会阻止传播:
对于 preventDefault 只需返回
false
加上@AndroidUniversity的答案 . 在一行中,您可以这样写:
如果您在一个绑定到事件的方法中,只需返回false:
我不得不
stopPropigation
和preventDefault
以防止按钮扩展它位于上方的手风琴项目 .所以...
如果您希望能够将其添加到任何元素而无需一遍又一遍地复制/粘贴相同的代码,您可以制定指令来执行此操作 . 它简单如下:
然后将其添加到您想要的元素:
使用JavaScript禁用href链接
它如何在带有Angular的TypeScript中工作(我的版本:4.1.2)
模板
TypeScript
IE(Internet Explorer)没有任何效果 . 我的测试人员能够通过单击其后面的按钮上的弹出窗口来打破我的模态 . 所以,我听了我的模态屏幕div点击并强制重新聚焦在弹出按钮上 .