Vue3中处理div的@click.middle事件时如何禁用滚轮光标？

核心问题分析 #

Chrome浏览器在中键点击元素时，会触发默认的滚动光标显示，仅通过prevent/stop修饰符可能无法完全覆盖浏览器的默认行为，需要结合事件拦截和样式强制设置来解决。

具体实现方案 #

1. 组合事件拦截+强制光标样式 #

直接在目标div上绑定事件并设置样式，覆盖浏览器默认行为：

<div
  @click.middle="handleMiddleClick"
  @auxclick.prevent.stop
  @mousedown="(e) => e.button === 2 && e.preventDefault()"
  style="cursor: default;"
>
  你的内容
</div>

2. 事件处理逻辑说明 #

• @click.middle：Vue3内置的中键点击事件监听，直接触发你的业务逻辑
• @auxclick.prevent.stop：阻止auxclick事件的默认行为（包括滚动光标触发），并停止事件冒泡避免父元素干扰
• @mousedown额外拦截：部分浏览器会在mousedown阶段就触发光标变化，通过判断中键（e.button === 2）提前阻止默认行为
• cursor: default：强制设置光标为普通箭头样式，从样式层面确保光标显示正常

3. 补充：样式优化（可选） #

如果需要复用样式，可通过CSS类设置：

/* 全局或scoped样式 */
.no-scroll-cursor {
  cursor: default !important;
}

然后在div上添加类：

<div
  @click.middle="handleMiddleClick"
  @auxclick.prevent.stop
  @mousedown="(e) => e.button === 2 && e.preventDefault()"
  class="no-scroll-cursor"
>
  你的内容
</div>

4. 排查之前方案失效的可能 #

如果之前@auxclick.prevent.stop失效，可检查以下几点：

• 是否有父元素绑定了更高优先级的中键事件，导致事件被提前拦截
• 是否页面中存在其他脚本修改了该div的事件监听或光标样式
• 尝试给mousedown事件也加上.stop修饰符，避免冒泡干扰：@mousedown.stop="(e) => e.button === 2 && e.preventDefault()"

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