一、http meta禁用缩放法
<meta name="viewport" content="width=device-width, user-scalable=no">
二、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); }