Vue-element-admin: 怎么做移动端点击延迟处理？

Created on 22 Apr 2020 · 2Comments · Source: PanJiaChen/vue-element-admin

vue-element-admin做了移动端的适配，没有做点击延迟处理。我加入了fastclick会出现el-checkbox点击选不中的情况，该怎么处理。找了好久没找到解决方法。

Source

apgyapgy

Most helpful comment

这是fastclick的问题。
1、请保存fastclick.js至public
2、修改index.html head中添加
`

<script>
  window.onload=function () {
    // 引入fastclick
    if ('addEventListener' in document) {
      FastClick.attach(document.body);
    }
    // ios user-scale 失效处理
    document.addEventListener('touchstart',function (event) {
      if(event.touches.length>1){
        event.preventDefault();
      }
    });
    var lastTouchEnd=0;
    document.addEventListener('touchend',function (event) {
      var now=(new Date()).getTime();
      if(now-lastTouchEnd<=300){
        event.preventDefault();
      }
      lastTouchEnd=now;
    },false);
    document.addEventListener('gesturestart', function (event) {
      event.preventDefault();
    });
  }
</script>`

3、问题关键，点击el-checkbox 事件触发dom为 span.el-checkbox__label 所以单纯的给组件添加类名 needsClick 也不能解决问题。所以我们需要手动修改一下fastclick.js的源码
4、最直观的方式是 FastClick.prototype.needsClick return 部分修改为

return (/\bneedsclick\b/).test(target.className) || (/\bel-checkbox__label\b/.test(target.className));

直接将el-checkbox硬编码排除fastclick的作用范围。有其他元素出问题的时候，可以在 FastClick.prototype.needsClick中debugger查看具体触发click的dom

dingangang on 28 Apr 2020

👍2 🎉1

All 2 comments

这是fastclick的问题。
1、请保存fastclick.js至public
2、修改index.html head中添加
`

<script>
  window.onload=function () {
    // 引入fastclick
    if ('addEventListener' in document) {
      FastClick.attach(document.body);
    }
    // ios user-scale 失效处理
    document.addEventListener('touchstart',function (event) {
      if(event.touches.length>1){
        event.preventDefault();
      }
    });
    var lastTouchEnd=0;
    document.addEventListener('touchend',function (event) {
      var now=(new Date()).getTime();
      if(now-lastTouchEnd<=300){
        event.preventDefault();
      }
      lastTouchEnd=now;
    },false);
    document.addEventListener('gesturestart', function (event) {
      event.preventDefault();
    });
  }
</script>`