Vue.js 2中a标签嵌套h3、h5标签点击无效问题求助

兄弟，我之前也碰到过类似的情况，点击图片能跳转但标题不行，大概率是这几个原因，你挨个排查下：

1. 先检查CSS样式问题 #

最常见的就是下面两种情况：

• h3/h5被设置了pointer-events: none：这个属性会直接让元素不响应任何点击事件，你打开浏览器F12，选中h3元素，看看样式里有没有这个属性，如果有，删掉或者改成pointer-events: auto就行。
• a标签的display属性不对：默认a标签是inline行内元素，包裹h3、h5这种块级元素时，可能在某些浏览器里点击区域没有覆盖到标题部分。给a标签加个display: block，让它变成块级元素，就能把内部所有元素都变成可点击区域了：

.item a {
  display: block;
}

另外，还要看看有没有其他元素（比如某个绝对定位的遮罩层）覆盖在h3/h5上面，导致你点击的时候其实点到了别的元素，用开发者工具的元素选择器点一下标题，就能看到实际触发点击的元素是什么。

2. 排查事件阻止问题 #

如果你的h3/h5上绑定了Vue的点击事件，比如@click="xxx"，要检查事件处理函数里有没有调用event.preventDefault()或者event.stopPropagation()，这两个方法会阻止a标签的默认跳转行为：

<!-- 错误示例：阻止了跳转 -->
<h3 class="dotdot" @click="handleTitleClick">{{ brand.title }}</h3>

<script>
export default {
  methods: {
    handleTitleClick(event) {
      event.preventDefault(); // 这行代码会让a标签跳不动！
      // 其他逻辑...
    }
  }
}
</script>

如果不需要阻止跳转，把preventDefault()删掉就行；如果确实需要处理点击又要跳转，那可以在方法里手动调用window.location.href跳转到目标地址，或者用Vue的$router.push（如果是单页应用）。

3. 确认href属性是否正确渲染 #

虽然图片能跳转，但还是确认下a标签的href有没有正确生成。打开浏览器源码，看看a标签的href属性是不是你期望的路径，或者用Vue Devtools查看组件的brand数据，确保brand.channel.parent_channel.name_en、brand.channel.name_en、brand.id这些值都存在，没有undefined的情况导致href拼接出错。

按这几步排查下来，应该就能解决问题啦！

内容的提问来源于stack exchange，提问作者PH.Chen