IOS由于Fastclick导致contentEditable无法聚焦

1. 问题描述

在IOS浏览器，用div模拟textarea实现可换行的编辑输入文本，在Vue条件下加入了fastclick防重点击，fastclick判断ontouchstart条件看是否是移动端，若是移动端则进行相应的事件绑定，移动端点击触发的顺序ontouchstart => ontouchend => click,由于在ios条件下ontouchend方法若needsClick（button、select、textarea、input、label、iframe、video or className contains 'needsclick'）为不可点击时防止了事件冒泡（preventDefault），所以出现无法点击情况。

2. 解决问题方

添加可编辑类needsclick,使div可编辑状态，去掉fastclick防止冒泡，如下

3. fastclick部分源码分析具体不能编辑原因

首先，我们要了解事件的分发过程，ontouchstart => ontouchend => click，针对于这点，我们可知道要是ontouchend阻塞了，会导致无法聚焦，最终div无法编译，下面是fastclick的可编辑的部分判断源码：

FastClick.prototype.needsClick = function(target) {

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); // 正则表达，className具有needsclick即可编辑
    };

再者看ontouchend方法

 if (!this.needsClick(targetElement)) {

      event.preventDefault();

      this.sendClick(targetElement, event);

  }

即若不添加needsclick则会执行preventDefault防止向上冒泡

对于android为什么就不会出现无法输入的情况呢？由于android手机webview没有触发ontouchend事件

若有错误，或更多问题，请多多指教，谢谢