如何禁用Quasar q-slider滑块组件的方向键默认响应事件

Quasar 的 q-slider 组件默认会在自身持有焦点时（哪怕鼠标拖拽交互已经结束，焦点会默认停留在滑块上）拦截方向键事件做值步进，原生range直接绑定keydown的方案不生效，核心原因是组件内部的事件监听绑定在自身元素的冒泡阶段，普通绑定的keydown事件要么没拿到正确的监听元素，要么触发时机晚于组件内部逻辑。
以下是三种可直接落地的方案，按需选择即可： #

方案1：单组件捕获阶段拦截事件（最推荐，侵入性最小） #

在滑块组件上绑定捕获阶段触发的keydown事件，在事件到达组件内部监听逻辑之前就拦截方向键，不影响其他按键的正常功能（比如Tab切换焦点）：

Vue3 写法（Quasar v2+） #

<q-slider
  v-model="currentValue"
  :min="0"
  :max="100"
  @keydown.capture="handleSliderKeydown"
/>

<script setup lang="ts">
const handleSliderKeydown = (e: KeyboardEvent) => {
  const targetKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']
  if (targetKeys.includes(e.key)) {
    e.preventDefault()
    e.stopPropagation()
  }
}
</script>

Vue2 写法（Quasar v1） #

只需要把事件修饰符改成.native.capture即可，事件处理逻辑完全一致：

<q-slider
  v-model="currentValue"
  :min="0"
  :max="100"
  @keydown.native.capture="handleSliderKeydown"
/>

方案2：交互后主动移除滑块焦点 #

如果需要保留滑块的无障碍访问能力（允许用户通过Tab聚焦后用方向键调整值），只是想避免鼠标操作后方向键被滑块占用，可以在鼠标/触摸交互结束后主动让滑块失焦：

<q-slider
  v-model="currentValue"
  :min="0"
  :max="100"
  @mouseup="(e) => (e.target as HTMLElement).blur()"
  @touchend="(e) => (e.target as HTMLElement).blur()"
/>

这种方案下，只有用户主动用Tab切到滑块时，方向键才会调整滑块值，鼠标点按、拖拽结束后滑块自动失焦，方向键会直接触发你全局绑定的业务逻辑。 #

方案3：全局捕获阶段统一处理 #

如果项目中存在大量q-slider，不想逐个加事件，可以修改你原来的全局keydown监听，改为在捕获阶段触发，优先级高于滑块内部的事件监听：

// 第三个参数传true代表在捕获阶段触发
document.addEventListener("keydown", (e: KeyboardEvent) => {
  const targetKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']
  if (targetKeys.includes(e.key)) {
    // 判断当前焦点在滑块上时，先阻断滑块的默认逻辑
    const activeElement = document.activeElement
    if (activeElement?.classList.contains('q-slider') || activeElement?.closest('.q-slider')) {
      e.preventDefault()
      e.stopPropagation()
    }
    // 这里写你自己的方向键业务逻辑
    // ...
  }
}, true)

注意：不要用DOM0级的document.onkeydown做绑定，这类监听的触发时机晚于捕获阶段，依然会被滑块的内部逻辑拦截。

内容的提问来源于stack exchange，提问作者a.bjorkmann