Vue3中如何使@click事件忽略文本选中高亮触发的点击

浏览器默认会在鼠标抬起时触发click事件，不管中间是否发生了拖动选中文本的操作：普通无位移点击、选中文本后松开鼠标这两种行为都会命中你绑定的点击监听，所以需要在回调里主动过滤掉选中文本的场景。

最通用的方案是在点击逻辑执行前，判断当前页面是否存在被选中的非空文本，存在则直接终止逻辑，仅在无选中文本时执行打开编辑弹窗的操作。

1. 把原来内联的点击逻辑抽成单独的处理方法，加入选区判断：

<div 
  v-bind="$attrs"
  class="flex flex-col"
  @click="handleClick"
>
  <!-- 原有div内部内容保持不变 -->
</div>

2. 对应脚本部分的实现：

import { ref } from 'vue'

const showEditModal = ref(false)

const handleClick = () => {
  // 获取当前选中的文本
  const selectedContent = window.getSelection()?.toString().trim()
  // 存在选中内容时直接返回，不触发弹窗
  if (selectedContent) return
  // 普通点击场景才执行原有逻辑
  showEditModal.value = true
}

这个方案兼容所有现代浏览器，不需要额外依赖，不会影响正常的文本选择功能。

如果需要更严格地区分“点击”和“拖动操作”（比如用户拖动了但没选中文本的场景也不想触发），可以搭配鼠标坐标差判断：

import { ref } from 'vue'

const showEditModal = ref(false)
// 记录鼠标按下时的坐标
const pressPos = ref({ x: 0, y: 0 })

const handleMouseDown = (e) => {
  pressPos.value = {
    x: e.clientX,
    y: e.clientY
  }
}

const handleClick = (e) => {
  // 第一层：过滤选中文本的场景
  const selectedContent = window.getSelection()?.toString().trim()
  if (selectedContent) return
  // 第二层：过滤拖动位移超过3px的场景
  const offset = Math.hypot(
    e.clientX - pressPos.value.x,
    e.clientY - pressPos.value.y
  )
  if (offset > 3) return

  showEditModal.value = true
}

对应模板里补充mousedown事件绑定即可：

<div 
  v-bind="$attrs"
  class="flex flex-col"
  @mousedown="handleMouseDown"
  @click="handleClick"
>
  <!-- 原有内容 -->
</div>

内容的提问来源于stack exchange，提问作者Some Noob Student