解决vue下使用fastclick导致ios端需要点击2下才能触发click的问题

在vue里添加了fastclick来处理移动端点击延迟的问题,但是在mac上使用的时候,发现click事件需要点击2下才能触发点击事件。

import fastclick from 'fastclick';

const { userAgent } = navigator;
const deviceIsIOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

export const fastFunc = () => {
  /* eslint-disable */
  fastclick.attach(document.body);
  fastclick.prototype.needsClick = (target) => {
    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;

      // **************************************************
      // 添加的click事件的过滤对象
      // 这里写上 你要 不阻止冒泡的元素名就可以了
      // **************************************************
      case 'div':
      case 'img':
      case 'p':
      case 'span':
      case 'a':
      case 'i':
        return true;
    }
  };
};
/* eslint-enable */
export default { fastFunc };

写完这个,最好不要用 touchstart 和 touchend 了,因为这样滑动也会触发这两个事件

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值