Vue常用插件：fastclick

简介

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

为了能够立即响应用户的点击事件，才有了FastClick。

备注：

• 如果需要原生的点击事件，给对应的标签添加类名needsclick即可
• fastclick目前有很多的坑，建议移动端不要用click事件

安装

插件安装：npm i fastclick --save

使用

src/main.js入口文件中引入

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

ios上面的可编辑div、input等会有一些bug，比如不好点击等。修改源文件

import FastClick from 'fastclick'

// fastclick 发帖的页面，ios有bug，可编辑的div和fastclick冲突
const deviceIsWindowsPhone = navigator.userAgent.indexOf('Windows Phone') >= 0
const deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone
FastClick.prototype.needsClick = function (target) {
  // if ($(target).parents('.needsclick').length) return true
  while (target.tagName !== 'BODY') {
    // 放在本地插件库, 请将includes换成indexOf判断
    if (target.className.includes('needsclick')) return true
    target = target.parentNode
  }

  switch (target.nodeName.toLowerCase()) {
  // Don't send a synthetic click to disabled inputs (issue #62)
  case 'button':
  case 'select':
  case 'textarea':
    if (target.disabled) {
      return true
    }
    break
  case 'input':
    // File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
    if ((deviceIsIOS && target.type === 'file') || target.disabled) {
      return true
    }
    break
  case 'label':
  case 'iframe': // iOS8 homescreen apps can prevent events bubbling into frames
  case 'video':
    return true
  }

  return (/\bneedsclick\b/).test(target.className)
}
// input number的bug
FastClick.prototype.focus = function(targetElement) {
  var length
  var userSelectionRange = deviceIsIOS
  if (deviceIsIOS) {
    try {
      length = targetElement.value.length
      targetElement.setSelectionRange(length, length)
    } catch (error) {
      userSelectionRange = false
    }
  }
  if (!userSelectionRange) {
    targetElement.focus()
  }
}
FastClick.attach(document.body)