Angular框架的事件冒泡（Event Modifiers）以及使用自定义指令阻止事件冒泡

2023-05-09 15:02| 来源: 网络整理| 查看: 265

Dom元素会通过一些事件通过Dom的层级结构进行传播，这种传播的过程叫做事件冒泡，事件冒泡是指的最内层的事件类型触发导致了父级的Dom触发了相同的事件类型事件，由内到外的一个过程，而由外到内指的是事件捕获。

import { Component } from "@angular/core"; @Component({ selector:'my-component', template:` 点击 ` }) export class AppComponent { handleClick() { console.log('触发了点击事件...'); } }

上述表示div的盒子添加点击事件后被执行。

angular中组件使用事件冒泡

在angular中，我们能使用@Output装饰器和EventEmitter自定义事件，它不同于Dom事件，因为它不支持事件冒泡。比如我们先自定义一个组件：

import { Component } from '@angular/core'; @Component({ selector: 'test-com', template: ` Click ` }) export class TestComComponent { }

在主程序中使用自定义的组件作为子组件进行使用。

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` ` }) export class AppComponent { handleClick() { console.log('Click'); } }

这种情况下可以看到依旧是正常输出的，表示我们在触发点击事件时，触发的是添加在子组件上的click事件，但是如果此时我们的子组件中也有click点击事件呢？修改上面的自定义组件的代码：

import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'test-com', template: ` Click child ` }) export class TestComComponent { @Output() click = new EventEmitter(); handleClick(button: string) { this.click.next(button); } } import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` ` }) export class AppComponent { handleClick(event: any) { console.log(event); } }

当点击Click child时，Angular内部会处理自定义事件和DOM事件，当Click事件触发后，handleClick方法接收的参数是MouseEvent对象。那么可以直接在点击事件时添加stopPropagation()方法

DOM元素的冒泡机制，允许父元素去监听子元素触发的事件，在Angular框架中，虽然可以直接使用stopPropagation直接解决问题，但是实际开发中，并不建议这么操作。

Event Modifiers

在dom元素中，两种情形需要注意的点，一种是会触发默认事件，则使用preventDefault()取消事件的所有默认行为，一种是事件冒泡，使用stopPropagation()阻止当前事件在Dom上的冒泡。在Angular中阻止事件冒泡的写法大致有几种：

Click me @Component({ selector: 'exe-app', template: ` Click me ` }) export class AboutComponent { doSomething($event: Event) { $event.stopPropagation(); } }

在Angular框架中，我们可以自定义指令声明阻止事件冒泡

import { Directive, Output, 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, private element: ElementRef) { } ngOnInit() { this.unsubscribe = this.renderer.listen( this.element.nativeElement, 'click', event => { event.stopPropagation(); this.stopPropEvent.emit(event); }); } ngOnDestroy() { this.unsubscribe(); } }

因此，在子组件中使用click事件时，只需要(click.stop)="handleClick()"则可以阻止事件的冒泡，更适合多人开发，避免了遇到一次就使用一次stopPropagation。

点击

需要注意的是：自定义指令文件创建好后，需要在你使用到的module.ts下声明一下。

import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appMyDirective]' }) export class MyDirectiveDirective { constructor(public elementRef: ElementRef) { } @HostListener('keyup', ['$event.target']) keyupFun(evt:any) { if (evt.value) { console.log(this.elementRef); this.elementRef.nativeElement.value = evt.value.trim(); } } }

创建好之后，在module.ts声明

import { MyDirectiveDirective } from "../../../my-directive.directive"; @NgModule({ declarations: [ ... StopPropagationDirective, MyDirectiveDirective ] }) image.png

【本文地址】

公司简介

联系我们