一、http meta禁用缩放法
二、css3属性法
移动端chromiun 和 iOS 9.3+ 可以用 CSS 属性来阻止元素的双击缩放进而取消点击穿透的延迟:
html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
三、使用fast click库
使用fastclick库,其实现思路是使用touchend事件来模拟click
FastClick.prototype.onTouchEnd = function(event){
// 一些状态监测代码
// 从这里开始,
if (!this.needsClick(targetElement)) {
// 如果这不是一个需要使用原生click的元素,则屏蔽原生事件,避免触发两次click
event.preventDefault();
// 触发一次模拟的click
this.sendClick(targetElement, event);
}
}
FastClick.prototype.sendClick = function(targetElement, event) {
// 这里是一些状态检查逻辑
// 创建一个鼠标事件
clickEvent = document.createEvent(‘MouseEvents‘);
// 初始化鼠标事件为click事件
clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
// fastclick的内部变量,用来识别click事件是原生还是模拟
clickEvent.forwardedTouchEvent = true;
// 在目标元素上触发该鼠标事件,
targetElement.dispatchEvent(clickEvent);
}