hellof2e / quark-design

Browser-native component library, framework-agnostic, base on web components.(移动端 UI 组件库,无框架,即插即用。)

Home Page:https://quark-ecosystem.github.io/quarkd-docs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

【popup组件】关闭按钮点击不可关闭

xsf0105 opened this issue · comments

commented

A description of the problem, steps to reproduce, or with code samples, can be hosted on a GitHub repository with a link to the repository. (问题说明,重现步骤,或附上代码示例,可存放 GitHub 仓库并提供仓库链接。)

【popup组件】关闭按钮点击不可关闭,需要双击才能关闭

commented

原因:项目中使用了 FastClick,该库对点击事件做了拦截。

FastClick.prototype.needsClick = function(target) {
  // 只加了这个if 判断quark 组件的逻辑,其它的逻辑同源码
  if (target.nodeName.toLowerCase().indexOf('quark-') !== -1) {
    return true;
  }
  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);
};

参考:youzan/vant#8678

直接 copy FastClick 源码,deviceIsIOS 变量会没有定义,可以这样改:

const oldNeedsClick = FastClick.prototype.needsClick;

FastClick.prototype.needsClick = function(target) {
  // 只加了这个if 判断 quark 组件的逻辑,其它的逻辑同源码
  if (target.nodeName.toLowerCase().indexOf('quark-') !== -1) {
    return true;
  }
  
  return oldNeedsClick(target);
};

FastClick 是在 Touch 相关的事件中做一层事件代理,但是代理的时候将 target 元素搞错了,因为关闭按钮放在 shadow-root 里面,FastClick 访问不到 quark-popup 内部的关闭按钮,所以 FastClick 代理点击关闭按钮事件的时候将 target 元素变成了 quark-popup 而不是其内部的关闭按钮,导致了点击关闭按钮无效。
有以下解决办法:

  1. 让 FastClick 不要代理 quark 相关组件的事件,也就是将上面的代码加入 main.js 中。
  2. 通过 slot 使用自定义关闭按钮,自定义关闭按钮会放在 shadow-root 外部。
  3. 现在项目都使用 user-scalable=no 禁用缩放,不再需要 FastClick 库来加快 iOS 的点击事件,如非必要,可以去掉 FastClick 库。