Angular 17拖拽调整iframe大小时鼠标移至iframe失效的解决问询

问题原因 #

iframe作为独立的浏览器上下文，当鼠标移动到其上方时，会抢占鼠标事件的处理权，导致绑定在window上的拖拽事件响应不顺畅甚至中断。

解决方案 #

方案一：临时禁用iframe的鼠标事件 #

在拖拽开始时禁用iframe的pointer-events属性，阻止其捕获鼠标事件；拖拽结束后恢复该属性，让iframe正常交互。

修改后的组件代码：

@Component({
  selector: 'app-resize-handler',
  standalone: true,
  imports: [],
  templateUrl: './resize-handler.component.html',
  styleUrls: ['./resize-handler.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ResizeHandlerComponent implements OnDestroy {
  private isResizing = false;
  private startX = 0;
  private startWidth = 0;
  private mouseMoveListener!: () => void;
  private mouseUpListener!: () => void;

  @ViewChild('iframe') iframe!: ElementRef<HTMLIFrameElement>;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

  onResizeStart(event: MouseEvent): void {
    this.isResizing = true;
    this.startX = event.clientX;
    this.startWidth = this.iframe.nativeElement.offsetWidth;
    
    // 禁用iframe的鼠标事件，防止抢占拖拽事件
    this.renderer.setStyle(this.iframe.nativeElement, 'pointer-events', 'none');
    
    this.mouseMoveListener = this.renderer.listen('window', 'mousemove', (e) => this.onResize(e));
    this.mouseUpListener = this.renderer.listen('window', 'mouseup', () => this.onResizeEnd());
    event.preventDefault();
  }

  onResize(event: MouseEvent): void {
    if (this.isResizing) {
      const dx = event.clientX - this.startX;
      const newWidth = this.startWidth + dx;
      this.iframe.nativeElement.style.width = `${newWidth}px`;
    }
  }

  onResizeEnd(): void {
    this.isResizing = false;
    
    // 恢复iframe的鼠标事件
    this.renderer.setStyle(this.iframe.nativeElement, 'pointer-events', 'auto');
    
    if (this.mouseMoveListener) this.mouseMoveListener();
    if (this.mouseUpListener) this.mouseUpListener();
  }

  ngOnDestroy(): void {
    this.onResizeEnd();
  }
}

方案二：添加遮罩层隔离iframe #

在拖拽时，在iframe上方添加一个透明遮罩层，让遮罩层接收鼠标事件，避免iframe抢占。

1. 修改模板添加遮罩：

<div class="resize-container">
    <div class="resize-content">
        <iframe src="https://www.example.com"  frameborder="0" #iframe></iframe>
        <!-- 拖拽时显示的遮罩层 -->
        <div class="resize-mask" *ngIf="isResizing"></div>
    </div>
    <div class="resize-handle" (mousedown)="onResizeStart($event)"></div>
</div>

2. 添加遮罩样式（SCSS）：

.resize-content {
  position: relative;
}

.resize-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 10; /* 确保遮罩在iframe上方 */
}

方案对比 #

• 方案一：实现简单，无需额外DOM元素，但拖拽过程中iframe完全无法响应鼠标操作，适合拖拽时不需要交互iframe的场景。
• 方案二：视觉上不影响iframe显示，拖拽结束后可立即恢复交互，适合需要保持iframe视觉状态的场景。

内容的提问来源于stack exchange，提问作者Ajay