如何在angular中(模糊)元素，除非它在子元素中单击

<div (click)="toggleBlur($event)">
  <p>父元素</p>
  <div>
    <p>子元素1</p>
  </div>
  <div>
    <p>子元素2</p>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  isBlur: boolean = false;

  toggleBlur(event: MouseEvent) {
    if (event.target !== event.currentTarget) {
      // 子元素被点击，不进行模糊操作
      return;
    }

    this.isBlur = !this.isBlur;
  }
}

.blur {
  filter: blur(5px);
}