如何设置光标样式，避免Vue元素中键点击时变为滚动光标？

嘿，这个问题我之前也碰到过！核心原因就是Chrome默认把中键点击绑定了“自动滚动”功能，触发这个默认行为时会强制替换光标样式，哪怕你提前设了cursor: pointer也没用。下面给你两个靠谱的解决办法：

方法一：在事件里阻止浏览器默认行为 #

Vue的.prevent修饰符对中键的默认行为不太管用，所以得手动在事件处理函数里调用event.preventDefault()，直接掐掉自动滚动的触发：

<template>
  <div 
    style="cursor: pointer;" 
    @click.middle="handleMiddleClick"
  >
    点我试试中键
  </div>
</template>

<script setup>
const handleMiddleClick = (event) => {
  // 阻止自动滚动的默认行为
  event.preventDefault();
  // 这里写你的业务逻辑
  console.log("中键点击触发啦！");
};
</script>

这么做之后，Chrome就不会启动自动滚动，光标会一直保持你设置的指针样式，完美解决问题。

方法二：加CSS增强兼容性（可选） #

要是担心其他浏览器也有类似的默认样式冲突，可以给目标元素加个CSS类，强制锁定光标样式：

<template>
  <div 
    class="middle-click-target"
    @click.middle="handleMiddleClick"
  >
    点我试试中键
  </div>
</template>

<style scoped>
.middle-click-target {
  cursor: pointer;
  /* 优先级不够的话可以加!important，不过尽量优先用选择器权重提升 */
  /* cursor: pointer !important; */
}
</style>

<script setup>
const handleMiddleClick = (event) => {
  event.preventDefault();
  console.log("中键点击触发啦！");
};
</script>

这里的!important是兜底方案，要是你的选择器权重足够（比如用类选择器+元素选择器），其实不用加也能生效。

补充说明 #

为啥会出现这个情况？因为Chrome中中键点击的默认优先级很高，浏览器先执行了自动滚动的行为，替换了光标样式，才轮到你的自定义事件触发。所以只要用event.preventDefault()阻止这个默认行为，就能让你的光标样式保持原样啦。

内容的提问来源于stack exchange，提问作者Mertcan Çüçen