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防止冒泡，如下

<style>

.needsclick{content: attr(placeholder);color: #B8B8B8;}

</style>

<div contentEditable="true" class="needsclick" placeholder="請輸入詳細地址"></div>

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事件

若有錯誤，或更多問題，請多多指教，謝謝