Vuejs 移动路由器链接被 v-on:mouseover 阻止

Question

有这个for列表：

<li
class="projects-item"
v-for="project in filteredProjects"
:key="project.id"
v-on:mouseover="displayHoverInfo($event, project)"
v-on:mouseleave="hover = false"
>
<router-link v-bind:to="'/project/' + project.slug">

和 js：

displayHoverInfo(event, project) {
this.hover = true;
this.hoveredProject = project;
console.log(event);
}

在桌面上一切正常，在移动设备上(点击时(，只有 v-on：mouseover/v-on：mouseleave 事件被触发。

Answer 1

我在这里偷了答案：https://forum.vuejs.org/t/how-to-disable-mouseover-on-mobile/37335

您可以在移动设备上禁用mouseover和mouseleave。更进一步，您可以使用用户代理检测它是否实际上是手机/平板电脑。

<li
class="projects-item"
v-for="project in filteredProjects"
:key="project.id"
v-on:mouseover="isMobile ? null : displayHoverInfo($event, project)"
v-on:mouseleave="isMobile ? null : hover = false"
>

new Vue({
el: "#app",
data: {
isMobile: false,
hover: false
},
methods: {
mq() {
this.isMobile = window.matchMedia('(max-width: 400px)').matches;
},
displayHoverInfo($event, project) {
// your method
}
},
created () {
// get initial val
this.mq()
// listen to resize
window.addEventListener('resize', this.mq)
},
beforeDestroy() {
window.removeEventListener('resize', this.mq)
}
})