首先了解一下加入faskclick这个库解决的问题:
- click 300ms延迟:浏览器click会比touch延迟300ms触发
- click穿透现象:当两个div同处一个position,上层div绑定touch,下层div绑定click,当上层div触发touch消失后,可能会触发下层div的click事件
bug描述:在页面浮层中,存在输入框,在使用fastClick后,导致输入框难以focus
解决方案:
import FastClick from 'fastclick'
import Helper from '@/util/helper'
FastClick.prototype.focus = function(targetElement) {
var length;
//兼容处理:在iOS7中,有一些元素(如date、datetime、month等)在setSelectionRange会出现TypeError
//这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性,所以一旦引用就会报错,因此排除这些属性才使用setSelectionRange方法
if (Helper.UA.isIos && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
length = targetElement.value.length;
targetElement.setSelectionRange(length, length);
/*修复bug ios 11.3不弹出键盘,这里加上聚焦代码,让其强制聚焦弹出键盘*/
targetElement.focus();
} else {
targetElement.focus();
}
};
export default FastClick