Firefox点击a标签内复选框触发跳转 阻止默认事件后复选框无法选中

问题表现 #

• 在带href属性的<a>标签内部嵌套<input type="checkbox">复选框，并为a标签绑定点击事件监听器时，Firefox浏览器中点击复选框会意外触发页面跳转
• 如果直接在a标签的点击回调中全局调用preventDefault()方法，虽然可以阻止跳转，但会导致复选框的选中状态无法正常切换
• Chrome、Edge等Chromium内核浏览器无上述异常
• 该问题属于Firefox的已知事件兼容问题

复现代码 #

Vue逻辑代码 #

const {
  createApp
} = Vue

createApp({
  data() {
    return {
      items: ['a', 'b', 'c', 'd'],
      selecteds: []
    }
  },
  methods: {
    onClick($event) {
      if ($event.target.nodeName === 'INPUT') {
        $event.stopImmediatePropagation()
      }
      console.log($event.target)
      console.log('clicekd')
    }
  }
}).mount('#app')

页面结构代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Testing</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <a href="https://example.com" @click="onClick($event)">
          <input type="checkbox" v-model="selecteds" :value="item" @change /> {{ item }}
        </a>
      </li>
    </ul>
  </div>
  <script></script>
</body>
</html>

实现目标 #

点击复选框时正常切换选中状态，同时不触发a标签的href跳转。

解决方案 #

方案1：移除原生href，JS控制跳转（兼容性最佳） #

该方案无浏览器兼容问题，同时支持自定义跳转逻辑：

1. 移除a标签上的原生href属性，从根源避免浏览器默认跳转和复选框行为冲突
2. 在a标签的点击回调中判断点击目标，仅当点击区域不是复选框时，手动执行跳转逻辑

修改后的核心代码：

<a @click="onClick($event)">
  <input type="checkbox" v-model="selecteds" :value="item" /> {{ item }}
</a>

methods: {
  onClick($event) {
    // 点击目标为复选框时直接返回，不干预复选框默认选中行为
    if ($event.target.nodeName === 'INPUT' && $event.target.type === 'checkbox') {
      return
    }
    // 点击a标签其他区域时执行跳转
    window.location.href = 'https://example.com'
    // 其余业务逻辑
    console.log('clicked a tag content area')
  }
}

方案2：保留href属性，在复选框事件中阻止冒泡 #

如果需要保留a标签原生属性（用于SEO、浏览器右键菜单等场景），不要在a标签的事件回调中处理拦截逻辑，直接给复选框单独绑定点击事件，在事件到达a标签之前就阻止冒泡：

<a href="https://example.com" @click="onClick($event)">
  <!-- 给复选框加.stop修饰符，阻止点击事件冒泡到父级a标签 -->
  <input type="checkbox" v-model="selecteds" :value="item" @click.stop /> {{ item }}
</a>

该写法下，复选框的点击事件不会传播到a标签，既不会触发a的默认跳转，也不会影响复选框自身的选中状态切换，全浏览器兼容。

内容的提问来源于stack exchange，提问作者Cyril N.