Primeng ptable v9列调整时如何阻止父元素触发拖拽功能？

问题根源 #

列调整时的mousedown/mousemove事件会向上冒泡到父级拖拽容器，导致父元素同步触发拖拽操作。核心是阻止表格列调整手柄的事件冒泡。

具体解决方案 #

方案1：直接监听列调整手柄的事件

在组件初始化完成后，获取所有表格列调整手柄，阻止其mousedown事件冒泡：

import { AfterViewInit, ElementRef, Renderer2 } from '@angular/core';

export class YourComponent implements AfterViewInit {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngAfterViewInit(): void {
    // 获取PrimeNG v9表格的列调整手柄（类名为.ui-resizable-handle）
    const resizeHandles = this.el.nativeElement.querySelectorAll('.ui-resizable-handle');
    
    resizeHandles.forEach(handle => {
      // 阻止mousedown事件冒泡，切断父级拖拽的触发源
      this.renderer.listen(handle, 'mousedown', (event) => {
        event.stopPropagation();
      });
    });
  }
}

方案2：事件委托适配动态列

如果表格列是动态生成的，用事件委托监听表格容器的事件，判断目标是否为调整手柄：

ngAfterViewInit(): void {
  const tableContainer = this.el.nativeElement.querySelector('.ui-table');
  
  this.renderer.listen(tableContainer, 'mousedown', (event) => {
    // 检查触发事件的元素是否是列调整手柄
    if (event.target.classList.contains('ui-resizable-handle')) {
      event.stopPropagation();
    }
  });
}

关键说明 #

• PrimeNG v9的列调整手柄类固定为ui-resizable-handle，可通过浏览器开发者工具确认元素类名。
• 阻止mousedown事件即可切断父级拖拽的启动逻辑（多数拖拽组件以mousedown作为拖拽触发起点），无需额外处理mousemove。
• 该方案不会影响表格列调整功能，同时保留父元素的拖拽特性。

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