Angular 15中CDK Overlay前置及mousedown导致click失效问题求助

为什么click事件失效 #

当你在mousedown事件中通过appendChild移动元素时，DOM元素会被先移除再重新插入到新位置。浏览器的click事件触发需要满足**mousedown和mouseup事件在同一个DOM元素上完成**，元素被移动后，mouseup事件实际在新插入的元素实例上触发，浏览器无法将其与之前的mousedown关联，因此不会触发click事件。

修复现有方案的方法 #

方法1：延迟元素移动到mouseup之后 #

把DOM移动逻辑放到mouseup事件中，确保事件序列完整：

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div (mousedown)="onMousedown()" (mouseup)="onMouseup()">
      <div (click)="inner()">
        Inner
      </div>
    </div>
  `,
})
export class App {
  constructor(private readonly el: ElementRef) {}
  onMousedown() {
    console.log('mousedown');
  }
  onMouseup() {
    const parent = this.el.nativeElement.parentElement as HTMLElement;
    parent.appendChild(this.el.nativeElement);
  }
  inner() {
    console.log('click');
  }
}

方法2：手动触发click事件（谨慎使用） #

如果必须在mousedown中移动元素，可以在移动后手动触发click事件，注意避免重复触发：

mousedown() {
  const parent = this.el.nativeElement.parentElement as HTMLElement;
  parent.appendChild(this.el.nativeElement);
  console.log('mousedown');
  // 手动触发内部元素的click事件
  this.el.nativeElement.querySelector('div')?.dispatchEvent(new Event('click'));
}

针对CDK Overlay的最优实现 #

Angular CDK Overlay本身提供层级管理能力，无需手动移动DOM，推荐以下两种方式：

方式1：利用OverlayConfig的zIndex配置 #

创建Overlay时动态设置更高的zIndex值，确保当前点击的overlay层级最高：

import { Overlay, OverlayConfig } from '@angular/cdk/overlay';

export class OverlayService {
  private overlayInstances: Overlay[] = [];
  private currentZIndex = 1000;

  constructor(private overlay: Overlay) {}

  createOverlay() {
    const config = new OverlayConfig({
      zIndex: this.currentZIndex++,
      // 其他配置项
    });
    const overlayRef = this.overlay.create(config);
    this.overlayInstances.push(overlayRef);
    
    // 监听点击事件，提升当前overlay的zIndex
    overlayRef.overlayElement.addEventListener('click', () => {
      config.zIndex = this.currentZIndex++;
      overlayRef.updateConfig(config);
    });
    
    return overlayRef;
  }
}

方式2：通过OverlayContainer调整DOM顺序 #

注入OverlayContainer，在overlay的mouseup事件中将其元素移到容器末尾（DOM顺序越靠后，默认层级越高）：

import { OverlayContainer } from '@angular/cdk/overlay';

@Component({
  // 你的overlay组件配置
})
export class MyOverlayComponent {
  constructor(
    private overlayContainer: OverlayContainer,
    private el: ElementRef
  ) {
    this.el.nativeElement.addEventListener('mouseup', () => {
      const container = this.overlayContainer.getContainerElement();
      container.appendChild(this.el.nativeElement);
    });
  }
}

内容的提问来源于stack exchange，提问作者Get Off My Lawn