解决编辑框移动端不能获取焦点的问题 --- 针对 wangeditor 编辑器

解决编辑框移动端不能获取焦点的问题

移动端Vue项目，为了解决ios点击延迟的问题，引入了 fastClick，结果导致编辑器不能获得焦点~ 我卒

// 引入FastClick库
import FastClick from 'fastclick'
FastClick.attach(document.body)

//  解决编辑框移动端不能获取焦点的问题
FastClick.prototype.needsClick = function (target) {
  if (target.className.indexOf('w-e') !== -1) {
    return true
  }
  if (target.parentElement) {
   return this.needsClick(target.parentElement)
  }
}

记录

开始解决
按照官方的解决办法，增加一个‘needsClick’的类名 fastclick
于是我开始遍历编辑器所有子元素增加className，试过之后发现问题：

1. 编辑器的内容都加上了类名，这就不太合适了叭 =.=
2. 编辑器中还有交互后js生成的元素，比如上传等按钮，这些元素并不会加上类名

卒 ++

那我就只有选择一个编辑器自带的类名了，仔细斟酌(*￣︶￣) 最后选了 “w-e”，只要包含这个类名前缀的元素全部都需要click效果
不过我又遇到问题：

if (target.className.indexOf('w-e') !== -1) {
    return true
  }

刚开始是只写 ☝ 这一个条件，后来测试发现编辑器的内容层级超超超多，这target根本满足不了大胃口
卒 ++

最后只有老实的递归一下，照顾到所有子元素

if (target.parentElement) {
   return this.needsClick(target.parentElement)
  }

最后，这种解决方法或许还有别的bug，我目前还没有遇到过

最最后感谢wangeditor项目的开源大佬，在编辑器的坑中救我一命~~~