开发的时候需要做一个弹窗形的二级导航，所以选择了Vant的Popover组件，最后在调试的时候发现绑定的@select="onSelect"需要点击两次才能触发。

image

这是因为移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。

解决方法

先执行安装fastclick的命令

npm install fastclick -S

之后在全局或者当前需要的页面使用fastclick

import FastClick from 'fastclick'
FastClick.attach(document.body)

完整代码

import FastClick from 'fastclick' 

methods:{
  titleItem(){
    setTimeout(() => {
        // 获取 Popover 弹窗的列表
        let popItem = document.querySelectorAll('.van-popover__action')
        for(let i=0;i<popItem.length;i++){
          FastClick.attach(popItem[i]) // 通过 FastClick 进行绑定
        }
    },300)
  }
}

参考文章

Vue.js - 移动端Click事件300毫秒延迟解决方案（fastClick.js）

更新

在使用fastclick之后vant轮播时触发了 click 事件，fastclick的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。

将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。