初始化触发点击事件_11月第22题：FastClick解决移动端点击有 300ms 的延迟的原理?...

背景：

• 移动端点击有 300ms 的延迟是因为移动端会有双击缩放的这个操作，因此浏览器在 click 之 后要等待 300ms，看用户有没有下一次点击，来判断这次操作是不是双击。

原理：

• 代替浏览器判断逻辑，手动触发click事件， 它模拟的click事件是在touchEnd获取的真实元素上(不是通过坐标计算出来的元素)触发的。

核心代码如下：

FastClick.prototype.onTouchEnd = function(event){  // 一些状态监测代码 ...  // 从这里开始，  if (!this.needsClick(targetElement)) {    // 如果这不是一个需要使用原生click的元素，则屏蔽原生事件，避免触发两次click    event.preventDefault();     // 触发一次模拟的click    this.sendClick(targetElement, event);  }}

FastClick在touchEnd的时候，在符合条件的情况下，主动触发了click事件，这样避免了浏览器默认的300毫秒等待判断。为了防止原生的click被触发，这里还通过event.preventDefault()屏蔽了原生的click事件。

看看它是如何模拟click事件的？

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