前言
为了提升移动端click的响应速度,使用了fastclick.js这么一个库。
这个库导致这个可编辑的div被点击无法轻松的唤起输入法。
长按才能成功。div的一个contentEditable=”true”
解决方案
首先:再你的编辑器中增加一个class属性。我用的是quilljs
<div id="editor" class="needsclick"></div>
然后我们去main.js(我是基于vue在做)重写他原型上的needsClick方法(源码在229行)
其实你也可以选择fark插件修改,放在本地库
import FastClick from 'fastclick'
// const $ = window.$
// 点击延迟 因为和编辑器冲突, 重制起原型方法needsClick
const deviceIsWindowsPhone = navigator.userAgent.indexOf('Windows Phone') >= 0
const deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone
FastClick.prototype.needsClick = function (target) {
// 下面这句
// 这是jq写法
// if ($(target).parents('.needsclick').length) return true
while (target.tagName !== 'BODY') {
// 放在本地插件库, 请将includes换成indexOf判断
if (target.className.includes('needsclick')) return true
target = target.parentNode
}
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)
}
FastClick.attach(document.body)