如何在VueJS组件中阻止Shift点击触发的文本选中？

云原生阿岚

2026-7-3

阻止Vue组件中Shift+点击的文本选中行为

方案一：直接用Vue事件修饰符快速处理

给渲染文本的容器绑定带修饰符的mousedown事件，直接阻止Shift键触发时的默认选中文本行为：

<template>
  <div class="text-content" @mousedown.shift.prevent>
    这里是需要阻止Shift点击选中的文本内容...
  </div>
</template>

@mousedown.shift：仅监听按下Shift键时的鼠标按下事件
.prevent：自动调用事件对象的preventDefault()，阻止浏览器默认的文本选中逻辑

方案二：自定义方法实现灵活控制

如果需要根据特定条件决定是否阻止（比如仅在某些状态下禁用选中），可以通过自定义方法处理：

<template>
  <div class="text-content" @mousedown="handleShiftClick">
    这里是需要阻止Shift点击选中的文本内容...
  </div>
</template>

<script setup>
const handleShiftClick = (e) => {
  // 仅当按下Shift键时阻止默认行为
  if (e.shiftKey) {
    e.preventDefault();
  }
};
</script>

这种方式可以在判断逻辑中加入额外条件，比如结合组件的状态变量控制是否启用阻止。

方案三：全局范围阻止指定组件的Shift选中

如果多个文本组件都需要该功能，可以通过Vue生命周期钩子实现全局监听，同时避免影响其他元素：

<script setup>
import { onMounted, onUnmounted } from 'vue';

let globalMouseDownHandler;

onMounted(() => {
  globalMouseDownHandler = (e) => {
    // 仅当点击目标属于指定文本容器时，阻止Shift点击的默认行为
    if (e.shiftKey && e.target.closest('.text-content')) {
      e.preventDefault();
    }
  };
  document.addEventListener('mousedown', globalMouseDownHandler);
});

onUnmounted(() => {
  // 组件卸载时移除全局监听，避免内存泄漏
  document.removeEventListener('mousedown', globalMouseDownHandler);
});
</script>