开发的时候需要做一个弹窗形的二级导航，所以选择了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 即可避免该问题。
