vue移动端项目中使用fastclick及遇上的issue

cod7ce 发布于2019-08-26 10:39 / 2510人阅读

摘要：在项目中安装插件在中引入并绑定到在项目中安装成功后测试会遇到以下问题点击不灵敏解决方法项目中使用时点击不灵敏兼容处理在中，有一些元素如等在会出现这是因为这些元素并没有和的整型数字属性，所以一旦引用就会报错，因此排除这些属性才使用方法修复

1、在vue项目中安装fastclick插件

npm install --save fastclick

2、在main.js中引入并绑定到body

import  FastClick  from  "fastclick"

FastClick.attach(document.body);

3、在项目中安装fastclick成功后测试会遇到以下问题：

os input点击不灵敏
解决方法：vue项目中使用fastclick时ios input点击不灵敏

FastClick.prototype.focus = function (targetElement) {
  var length;

  var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0;
  var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone;  
    //兼容处理:在iOS7中，有一些元素（如date、datetime、month等）在setSelectionRange会出现TypeError    
    //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性，所以一旦引用就会报错，因此排除这些属性才使用setSelectionRange方法
  if ( deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf("date") !== 0 && targetElement.type !== "time" && targetElement.type !== "month" && targetElement.type !== "email") { 
    length = targetElement.value.length; 
    targetElement.setSelectionRange(length, length);//修复bug ios 11.3不弹出键盘，这里加上聚焦代码，让其强制聚焦弹出键盘    
    targetElement.focus(); 
  } else { 
    targetElement.focus(); 
  }
}

os 软键盘关闭后页面不会回弹
解决方法：解决IOS中input失焦后，页面上移，点击不了问题

      var u = navigator.userAgent;
      var flag;
      var timer;
      var isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isIOS) {
        document.body.addEventListener("focusin", () => {  //软键盘弹起事件
          flag = true;
          clearTimeout(timer);
        })
        document.body.addEventListener("focusout", () => { //软键盘关闭事件
          flag = false;
          if (!flag) {
            timer = setTimeout( ()=> {
              window.scrollTo({ top: 0, left: 0, behavior: "smooth" })//重点  =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变，并不一定要回到页面顶部)
            }, 200);
          } else {
            return false;
          }
        })
      } else {
        return false;
      }

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106537.html

前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
Vue.js 移动端 Web App 点击穿透问题解决方案

摘要：参考博文也来说说事件与点击穿透问题移动页面点击穿透问题解决方案点击穿透原理及解决书籍移动手册以上部分资料搜集整理自网络，如有不对的地方希望及时告知，欢迎大家批评指正，谢谢描述在近期的一个移动端项目中，有一个页面需要有弹框提示，并且这个弹框通过关闭按钮关闭。页面当中使用了 iScroll 来实现页面局部滚动，在 iScroll 的配置当中把 tap 和 click 事件都开启了。代码...

wums 2019-08-20 18:31 评论0 收藏0
移动端触摸、点击事件优化（fastclick源码学习）

摘要：移动端触摸点击事件优化源码学习最近在做一些微信移动端的页面，在此记录关于移动端触摸和点击事件的学习优化过程，主要内容围绕展开。当指针设备通常指鼠标在元素上移动时事件被触发。移动端有延迟问题，可没有哦。移动端触摸、点击事件优化（fastclick源码学习）最近在做一些微信移动端的页面，在此记录关于移动端触摸和点击事件的学习优化过程，主要内容围绕fastclick展开。fastclic...

paney129 2019-08-26 11:58 评论0 收藏0
移动端触摸、点击事件优化（fastclick源码学习）

摘要：移动端触摸点击事件优化源码学习最近在做一些微信移动端的页面，在此记录关于移动端触摸和点击事件的学习优化过程，主要内容围绕展开。当指针设备通常指鼠标在元素上移动时事件被触发。移动端有延迟问题，可没有哦。移动端触摸、点击事件优化（fastclick源码学习）最近在做一些微信移动端的页面，在此记录关于移动端触摸和点击事件的学习优化过程，主要内容围绕fastclick展开。fastclic...

fxp 2019-08-02 10:36 评论0 收藏0