Vue中@click.stop阻止冒泡影响内部点击的解决方案（Quasar+Leaflet）

• 直接在<q-drawer>根节点绑定@click.stop时，会无差别拦截所有点击事件的冒泡路径。Quasar内置的按钮、输入框等组件的部分交互逻辑（比如点击反馈、下拉展开、输入聚焦）依赖事件在组件内部节点的正常冒泡，被全局拦截后自然会出现全量交互失效的问题。
• 点击抽屉空白区域触发地图取消选中逻辑，并不是事件从抽屉DOM冒泡到了地图DOM：两者是DOM树中的平级节点，不存在父子级冒泡关系。真实原因是Leaflet为了覆盖全地图区域的交互，会在document节点全局绑定点击事件监听，只要点击事件最终冒泡到document层且没有被拦截，Leaflet就会判定点击发生在地图区域，执行选中取消的逻辑。

优先选第一种方案，改动最小、稳定性最高：

方案1：单独给抽屉内容容器绑定事件拦截 #

不要在q-drawer根节点加事件修饰符，在抽屉内部套一层占满剩余空间的内容根容器，把@click.stop绑在这个容器上即可。
代码示例：

<q-drawer
  v-model="drawerVisible"
  side="right"
  :width="360"
  class="bg-white"
>
  <!-- 内容根容器，拦截所有内部点击的冒泡 -->
  <div class="fit p-md" @click.stop>
    <!-- 下方放所有业务交互元素，内部事件流完全不受影响 -->
    <q-input v-model="targetConfig.name" label="要素名称" class="q-mb-md" />
    <q-select v-model="targetConfig.type" :options="typeOptions" label="要素类型" class="q-mb-md" />
    <q-btn color="primary" label="保存配置" @click="saveConfig" />
  </div>
</q-drawer>

这个方案的逻辑是：所有发生在抽屉内的点击（不管点的是交互元素还是内容区空白），冒泡到内容根div时就会被阻止继续向上传播，永远到不了document层，自然不会触发Leaflet的地图点击逻辑；同时div内部的事件冒泡完全正常，所有组件的交互不会受到任何影响。

方案2：无侵入式事件判断（适合已完成大量DOM编写的场景） #

如果不想额外调整DOM结构，可以直接给q-drawer绑定点击事件，通过判断点击目标决定是否拦截冒泡，只拦截空白区域的点击，放过交互元素的点击。
代码示例：

<q-drawer
  v-model="drawerVisible"
  side="right"
  :width="360"
  class="bg-white p-md"
  @click="handleDrawerClick"
>
  <q-input v-model="targetConfig.name" label="要素名称" class="q-mb-md" />
  <q-select v-model="targetConfig.type" :options="typeOptions" label="要素类型" class="q-mb-md" />
  <q-btn color="primary" label="保存配置" @click="saveConfig" />
</q-drawer>

对应事件处理逻辑：

const handleDrawerClick = (e) => {
  // 命中可交互元素时直接放行，不拦截冒泡
  const hitInteractive = e.target.closest(
    'button, input, textarea, select, a, .q-interactive, .q-field'
  )
  if (hitInteractive) return
  // 点击空白区域时阻止事件冒泡到document
  e.stopPropagation()
}

• 不要给q-drawer设置pointer-events: none样式，也不要给Leaflet地图容器设置高于q-drawer的z-index，否则会出现更严重的永久穿透问题
• 如果开启了q-drawer的遮罩层（配置overlay属性），记得给遮罩层也加上@click.stop，避免点击遮罩时事件冒泡到document触发地图逻辑
• 不要用@click.capture.stop在捕获阶段拦截事件，这种写法会直接阻断所有子元素接收事件，必然导致内部交互失效

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