v-on:mouseover 阻止了 vuejs 移动路由器链接

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)
  }
})