html5 click 300毫秒延迟和事件点透解决方案

一、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);
}