hellof2e/quark-design

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

xsf0105 opened this issue · 2 comments

xsf0105 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组件】关闭按钮点击不可关闭，需要双击才能关闭

xsf0105 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

zhuokuang commented

直接 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 库。
  • 👍1