Angular 4.x Events Bubbling
Angular 组件和 DOM 元素通过事件与外部进行通信, Angular 事件绑定语法对于组件和 DOM 元素来说是相同的 - (eventName)="expression" : <button (click)="onClick()">Click</button> DOM ELEMENTSDOM 元素触发的一些事件通过 DOM 层级结构传播。这种传播过程称为事件冒泡。事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素。DOM 事件冒泡与 Angular 可以无缝工作,具体示例如下: import { Component } from '@angular/core'; @Component({ selector: 'exe-app',template: ` <div (click)="onClick()"> <button>Click</button> </div> ` }) export class AppComponent { onClick() { console.log('Click'); } } 以上代码成功运行后,当用户点击 Click 即表示 Angular ComponentAngular 允许开发者通过 event-bubbling.component.ts import { Component } from '@angular/core'; @Component({ selector: 'event-bubbling',template: ` <div> <button>Click</button> </div> ` }) export class EventBubblingComponent { } app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'exe-app',template: ` <div> <event-bubbling (click)="onClick()"></event-bubbling> </div> ` }) export class AppComponent { onClick() { console.log('Click'); } } 以上代码成功运行后,当用户点击 Custom Eventsevent-bubbling.component.ts import { Component,Output,EventEmitter } from '@angular/core'; @Component({ selector: 'event-bubbling',template: ` <div> <button (click)="onClick('Button 1')">Button 1</button> <button (click)="onClick('Button 2')">Button 2</button> </div> ` }) export class EventBubblingComponent { @Output() click = new EventEmitter(); onClick(button: string) { this.click.next(button); } } app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'exe-app',template: ` <div> <event-bubbling (click)="onClick($event)"></event-bubbling> </div> ` }) export class AppComponent { onClick(event: any) { console.log(event); } } 以上代码成功运行后,当用户点击 Button 1 MouseEvent {isTrusted: true,screenX: 69,screenY: 161,clientX: 43,clientY: 22…} 我们看到控制台输出了两个信息,说明在这种情况下,Angular 可以处理自定义事件和 DOM (click) 事件。当 click 事件触发后, 那么要如何修复这个问题呢?我们可以利用 DOM 事件提供的防止冒泡的机制,即 event-bubbling.component.ts import { Component,template: ` <div> <button (click)="onClick($event,'Button 1')">Button 1</button> <button (click)="onClick($event,'Button 2')">Button 2</button> </div> ` }) export class EventBubblingComponent { @Output() click = new EventEmitter(); onClick(event: Event,button: string) { event.stopPropagation(); this.click.next(button); } } 以上代码成功运行后,当用户点击 现在我们来总结一下:
介绍完上面的内容,接下来我们来介绍一下在 Angular 中如何实现 Event Modifiers在实际项目中,我们经常需要在事件处理器中调用
对于 <a id="link" href="https://segmentfault.com/a/1190000008754631">Angular 4.x 修仙之路</a> <script> document.getElementById('link').onclick = function(ev) { ev.preventDefault(); // 阻止浏览器默认动作 (页面跳转) window.open(this.href); // 在新窗口打开页面 }; </script> 一下子扯远了,赶紧回到正题。在 Angular 中阻止 DOM 事件冒泡,我们可以使用以下两种方式: 方式一<div> <button (click)="$event.stopPropagation(); doSomething()">Click me</button> </div> 方式二@Component({ selector: 'exe-app',template: ` <div> <button (click)="doSomething($event)">Click me</button> </div>` }) export class AboutComponent { doSomething($event: Event) { $event.stopPropagation(); // your logic } } 是不是感觉很麻烦,每次都得显式地调用 <!-- the click event's propagation will be stopped --> <a v-on:click.stop="doThis"></a> <!-- the submit event will no longer reload the page --> <form v-on:submit.prevent="onSubmit"></form> <!-- the click event will be triggered at most once --> <a v-on:click.once="doThis"></a> 接下来我们也来基于 Angular 的指令系统,实现上述的功能。最终的使用示例如下: <div class="parent" (click)="fromParent()"> <button class="child" (click.stop)="fromChild()">Click me</button> </div> 自定义 [click.stop] 指令import { Directive,EventEmitter,Renderer2,ElementRef } from '@angular/core'; @Directive({ selector: '[click.stop]' }) export class StopPropagationDirective { @Output("click.stop") stopPropEvent = new EventEmitter(); unsubscribe: () => void; constructor( private renderer: Renderer2,// Angular 2.x导入Renderer private element: ElementRef) { } ngOnInit() { this.unsubscribe = this.renderer.listen( this.element.nativeElement,'click',event => { event.stopPropagation(); this.stopPropEvent.emit(event); }); } ngOnDestroy() { this.unsubscribe(); } } [click.stop] 指令应用import { Component } from '@angular/core'; @Component({ selector: 'exe-app',template: ` <div class="parent" (click)="fromParent()"> <button class="child" (click.stop)="fromChild()">Click me</button> </div> ` }) export class AppComponent { fromChild() { console.log('I am Child'); } fromParent() { console.log('I am Parent'); } } 以上代码成功运行后,当用户点击 参考资源
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |