外部容器的拖拽事件如何不触发内部组件的点击事件

心路

这个问题困扰了我实在很多天，百度无果，问了ChatGpt和claude都无果，也问过copilot chat。
一个都不能给出解决方案，最终想到了一个绝妙的方法解决了这个问题，希望是社区的第一个解决方案吧。

实现思路

主要是用一个变量来标识正处在拖拽状态，如果正在拖拽则将内部组件设置样式pointer-events: none。
因为我使用了vue-draggable-resizable插件作为容器，所以就基于此基础上来做讨论。（其他情况的实现思路也一样）

代码实现

<vue-draggable-resizable
  @dragging="isDragging = true"
  @dragstop="isDragging = false"
>
  <component
    :class="{ 'is-disabled': isDragging }"
    is="c"
  />
</vue-draggable-resizable>

.is-disabled {
  pointer-events: none;
}