浅谈FastClick 填坑及源码解析

【长沙网络推广分享】FastClick 填坑及源码

在产品妹子的一次体验反馈中，我们遇到了一个关于 iOS 设备在手Q阅读书友交流区发表书评时的体验问题。当使用较快速度点击时，光标总会跳到 textarea 内容的尾部，只有当我们稍微延长点击时间（例如超过150ms）时，光标才能正常定位到预期位置。这无疑给我们的用户体验带来了不小的困扰。

初时，我们以为是 iOS 原生的交互问题，但在访问其他页面时，这种奇怪的现象并未出现。随后，我们开始怀疑是否是 JS 注册的事件导致的问题。在尝试移除业务模块后，问题依旧存在。于是，我们开始了漫长的排除法过程，一点点地移除页面上的库，最终发现问题的根源在于我们一直在怀疑的 Fastclick。

Fastclick 是一个能够消除移动设备浏览器中的延迟的库，它为我们带来了许多便利，但在某些特定情境下，也会产生一些意想不到的问题。在我们面临这个困扰时，小组的 kindeng 童鞋为我们找到了解决方案。我仍然想要深入研究这个问题，想要知道为什么 Fastclick 在我们的页面上造成了这个坑，它究竟对我们的页面做了什么？

昨晚我投入了一些时间，深入研究了 Fastclick 的源码。这将是一篇深入的文章，我会对源码进行详细的分析和注释，帮助大家理解 Fastclick 的工作原理，以及为什么在某些情况下会产生问题。

为了更直观地展示我的分析和思考过程，我将源码和分析文章挂在了我的个人网站上。有兴趣的童鞋可以前往下载和阅读。让我们一起开始这次 FastClick 源码之旅吧！

在的过程中，我会尽量保持语言生动、通俗易懂，并结合实际的案例进行说明。希望通过我的，大家能够对 Fastclick 有更深入的理解，同时也能够解决我们在开发过程中遇到的类似问题。让我们一起、学习、进步！当我们开始FastClick的事件注册机制时，会发现这个过程实际上相当直观和简洁。我们通过检查文档是否支持`addEventListener`来确认我们能否使用FastClick。一旦确认可以使用，我们就会着手初始化FastClick实例。

在FastClick的构造函数中，首先检查是否需要对特定的层（layer）进行处理。如果FastClick.notNeeded方法返回true，说明当前环境不需要FastClick处理，那么就会直接返回，不再进行后续操作。

那么，FastClick.notNeeded方法究竟在做什么呢？它在进行一系列浏览器嗅探检测，看是否需要FastClick来处理触摸事件。如果当前环境是支持触摸但不需要FastClick处理的设备或浏览器，方法会返回true。例如，如果设备不支持触摸操作，或者浏览器版本较高并且页面设置了不允许用户缩放（user-scalable=no），那么就可以禁用FastClick。因为这样的环境和浏览器已经解决了移动设备的点击延迟问题。简单来说，这个方法的目的是找出那些不需要FastClick也能解决点击延迟问题的环境。

接下来我们深入看一下FastClick的初始化过程。对于需要处理的层，首先进行了一些语法糖的处理，使得老旧的安卓设备也能正常工作。然后，针对安卓设备添加了一些特殊的事件监听器处理鼠标事件。接着对所有需要处理的事件类型添加了监听器，包括点击、触摸开始、触摸移动、触摸结束和触摸取消等。在这个过程中还做了一些兼容性的处理，比如对于那些不支持阻止事件冒泡的浏览器进行了特殊处理。如果DOM元素上原本有onclick函数，那么会将其替换为通过addEventListener添加的函数，并将原来的onclick设置为null。

FastClick是一个解决移动设备点击延迟问题的库。它通过添加事件监听器来精确控制点击事件的触发时间，从而消除了用户在触摸屏幕时因延迟而产生的困扰。这个库通过一系列的判断和适配，使得在各种设备和浏览器上都能正常工作，提供了流畅的用户体验。关于安卓手Q的UA匹配问题，由于其会被匹配到/Chrome/([0-9]+)/，带有 'user-scalable=no' meta标签的安卓手Q页面会被FastClick视为无需处理页面。这也是为什么在安卓手Q中不会出现某些特定问题的原因。

接下来，我们深入其构造函数。此函数为页面元素（layer，即body）添加了多个事件监听，包括click、touchstart、touchmove、touchend以及touchcancel。这些事件监听用于捕捉用户的交互行为。

特别地，对于安卓设备，还进行了一些额外的处理。当识别到设备为安卓系统时，为其添加了mouseover、mousedown以及mouseup事件监听。这些额外的事件监听是为了更好地适应安卓设备的特性，提供更为流畅的用户体验。

利用bind方法，这些事件回调中的this均指向Fastclick实例上下文，确保了事件处理的正确性和一致性。

值得注意的是，onclick事件以及针对安卓的额外处理部分，采用的是捕获监听的方式。这意味着它们能够在事件传播过程中更早地捕获到事件，从而及时进行响应和处理。

现在，我们分别来看看这些事件回调的具体作用。click事件回调可能是用于处理点击事件的逻辑；touchstart、touchmove、touchend以及touchcancel回调则用于处理触摸事件，包括触摸开始、移动、结束以及触摸中断等情况。而针对安卓的额外处理，可能是为了弥补安卓设备在触摸事件处理上的一些差异。

当触摸事件开始，FastClick的原型会执行一个名为onTouchStart的函数。这个函数的主要任务是处理触摸事件的初始阶段。如果触摸事件涉及多个手指，那么函数会直接忽略它，因为多指触控的手势不在我们的处理范围内。

然后，函数会获取被触摸的目标元素，以及触摸点的信息。在处理IOS设备时，函数会检查用户是否已经选中了一些内容，如果是的话，就忽略这次触摸事件。如果设备不是IOS4，函数还会处理一些特定情况，比如点击事件回调打开了一个alert/confirm后，新的触摸事件可能会与之前的触摸事件共享同一个标识符。为了避免这种情况导致的问题，我们会禁用这个新事件。我们还会检查目标元素是否是一个滚动容器的子元素，并标记其滚动容器的页面偏移值。

在touchstart事件的回调函数中，我们会设置一个标志来追踪后续的click事件。我们会记录下touch事件开始的时间戳、目标元素以及触摸点的页面偏移值。我们还会检查两次点击事件之间的时间差是否小于一个常量（tapDelay），如果是的话，就会阻止默认的click事件触发，以避免phantom双击问题。

接下来是关于updateScrollParent函数的。这个函数的主要目的是检查目标元素是否是一个滚动容器的子元素，并给它添加一个标记。它会检查目标元素是否有一个名为fastClickScrollParent的属性，如果没有或者该元素不是其包含的元素，那么它会向上查找滚动容器。一旦找到符合条件的滚动容器，就会给该容器添加一个fastClickScrollParent属性并设置其值为目标元素。还会给滚动容器添加一个名为fastClickLastScrollTop的属性，用来记录其当前的垂直滚动偏移。

深入理解FastClick中的`onTouchMove`、`onTouchEnd`及相关方法

在FastClick库中，`onTouchMove`和`onTouchEnd`是两个关键的方法，它们负责处理触摸移动和触摸结束事件，以提高页面上的点击响应速度。让我们深入理解这两个方法及其相关实现。

来看`onTouchMove`方法：

FastClick通过`onTouchMove`方法来追踪触摸移动事件。当触摸在屏幕上移动时，该方法会被触发。其主要作用是判断触摸是否在预期的元素上移动，以及是否应继续追踪点击事件。如果目标元素突然改变，或者用户实际上是在进行移动手势而非点击，那么将停止追踪点击事件并清除相关状态。

接下来是`touchHasMoved`方法：

这个方法用于判断触摸是否移动了超过一定的阈值（在这里是10个像素单位）。如果触摸移动的距离超过了设定的边界，那么将认为这是一个移动事件而非点击事件。这对于区分用户的点击意图和滑动操作非常重要。

再来看`onTouchEnd`方法：

当触摸结束时，`onTouchEnd`方法会被触发。它的主要作用是判断并处理点击事件。其中包括避免双击事件（通过在短时间内连续点击两次产生的），识别长按事件，重置相关状态，并处理点击事件的目标元素。它还处理了iOS设备下的特定问题，如目标元素的误识别、穿透点击处理等。

其中涉及到的几个关键原型方法包括：

`needsFocus`：用于判断给定元素是否需要通过合成click事件来模拟聚焦。这涉及到对不同类型元素（如textarea、select、input等）的处理，以及带有特定class的元素的处理。

`focus`：用于触发元素的聚焦事件。在iOS设备上，对于某些具有selectionRange特性的input元素，它会通过设定光标范围来设定聚焦位置。对于其他元素，则直接触发其focus事件。

`sendClick`：用于立即触发元素的click事件，而不必等待默认的300ms延迟。这对于提高点击响应速度至关重要。

FastClick通过`onTouchMove`和`onTouchEnd`等方法，以及相关的原型方法，实现了对触摸事件的精确处理，提高了页面上的点击响应速度，优化了用户体验。 FastClick 中的 sendClick 方法与 Textarea 光标定位之谜

在移动端的网页交互中，确保 textarea 能够正确聚焦并定位光标是一个常见的挑战。这其中，`this.sendClick`方法扮演着关键角色。它就像是一个神奇的咒语，能够立即在 textarea 元素上触发 click 事件，使其获得焦点。

让我们深入了解这个方法的工作原理。

FastClick 的 sendClick 方法

在 FastClick 的 `sendClick` 方法中，首先会检查当前是否有活跃的聚焦元素（`document.activeElement`）。如果存在且这个元素不是我们即将点击的目标元素，那么就需要让这个活跃元素失去焦点。这是因为在某些安卓设备上，如果不进行这一步，合成的 click 事件可能会失效。

接下来，方法会合成一个 click 事件。这个事件带有一些特定的属性，确保它能够有效追踪。特别注意的是，这个合成的 click 事件会被标记上一个特殊的属性 `forwardedTouchEvent`，这是 fastclick 的内部标识，用来区分这个事件是原生的还是合成的。

这个合成的 click 事件会被立即触发在目标元素上。

determineEventType 方法的作用

在 `determineEventType` 方法中，根据设备和目标元素的类型来决定使用哪种事件类型。对于安卓设备上的 select 元素，由于它无法通过合成的 click 事件展开，所以会选择使用 mousedown 事件。其他情况则使用 click 事件。

Textarea 的光标定位之谜

虽然 `sendClick` 方法能够使 textarea 聚焦，但这里存在一个谜团：为什么 touchend 之后的 focus 事件没有被触发？如果 focus 事件能够被正确触发，那么光标应该能够准确地定位到正确的位置。这个问题可能与设备的触摸事件和浏览器的焦点事件处理机制有关，需要进一步研究和。

狼蚁网站SEO优化的秘密

当我们遇到iOS设备上的select元素时，需要特别小心处理。在iOS4下，如果select元素的默认事件被禁用，那么select目录将无法正常打开。即使在某些iOS6/7版本中，当VoiceOver功能开启时，也会出现类似问题。我们必须确保select元素能够穿透默认事件。

为了解决这个问题，我们可以进行一些调整。我们需要检查事件的目标元素是否是textarea或者类型为text的input元素。如果不是，并且设备不是iOS设备或者目标元素不是select，那么我们就会阻止默认事件。这样，textarea就无法获取焦点，我们需要对此进行修复。

有一个值得注意的地方是Fastclick库在处理点击事件时的行为。它会在ontouchEnd事件末尾执行this.needsClick方法，这可能导致即使元素被添加了“needsclick”类名，也无法阻止默认事件的问题。这个问题已经找到了解决方法。

接下来，让我们继续onMouse和onClick事件的处理方式。在Fastclick库中，onMouse方法用于决定是否允许穿透事件（即触发layer的click默认事件）。如果目标元素没有触发过touch事件或者触发的click事件是合成的，那么就会允许穿透事件。如果编程派生的事件所对应元素事件可以被允许，并且其没有执行过preventDefault方法（即event.cancelable不为true），那么也会允许穿透事件。对于需要做预防穿透处理的元素或者做了快速双击的情况，会阻止默认事件和事件的冒泡。如果允许穿透事件，那么就会返回true。需要注意的是，click事件通常是由touch事件衍生而来的，也会在touch事件之后触发。

对于狼蚁网站的SEO优化，我们需要特别关注移动设备上的交互问题，确保在各种设备和浏览器上都能提供良好的用户体验。通过仔细处理这些事件，我们可以确保网站的流畅性和可用性，从而提升用户满意度和网站的排名。在FastClick的事件处理机制时，我们不仅要关注触摸事件的处理，还要深入理解那些我们在触摸事件过程中没有禁用默认事件的场景。对于这些情况，我们需要进一步在点击事件的捕获阶段进行判断，决定是否要禁用点击事件，以避免可能出现的穿透问题。

FastClick的核心逻辑在于捕获目标事件并判断是否需要解决穿透问题。当触摸到一个需要解决穿透问题的元素时，FastClick会合成一个click事件在该元素上触发，并通过preventDefault来禁用默认事件。这种机制确保了即使在触摸事件中未禁用默认事件的情况下，我们仍然能够控制点击事件的触发。

在FastClick的onClick方法中，我们首先处理了特殊情况，例如跟踪点击事件的存在和iOS模拟器的特定行为。这些方法主要是为了解决特定场景下的穿透问题。当这些方法执行完毕后，我们会调用onMouse方法来判断点击事件是否被允许。如果点击被允许，我们会将targetElement置空，以确保在onMouse事件中不会阻止默认事件。这是一种精细的控制机制，确保了只有在需要的时候才会禁用默认事件。

当我们需要销毁Fastclick所注册的监听事件时，我们通过destroy方法移除所有注册的事件监听器。这个过程涉及到移除各种触摸和点击事件的监听器，以确保FastClick不会继续影响元素的交互行为。这也是FastClick的一个关键部分，它允许我们在需要的时候完全移除FastClick的影响。

FastClick通过捕获目标事件并判断是否需要解决穿透问题来实现其功能。在触摸事件过程中未禁用默认事件的场景，它会在点击事件的捕获阶段进行进一步的判断和处理。这种机制确保了页面的交互行为能够按照预期进行，避免了穿透问题带来的困扰。FastClick还提供了灵活的接口，允许开发者在需要的时候完全移除其影响。FastClick的世界：虽好但也有挑战，深入了解源码是关键

当我们谈论FastClick时，我们谈论的是一种高效、便捷的解决方案，它能解决移动设备上点击延迟的问题。正如任何强大的工具一样，FastClick也有其独特的挑战和需要适应的地方。为了更好地利用FastClick，理解其源码是非常必要的。

FastClick是一个轻量级的库，它通过消除触摸设备的点击延迟来提高页面的响应速度。这对于构建响应迅速、用户体验出色的移动应用至关重要。虽然FastClick的优点明显，但在实际使用中，我们也遇到了一些需要注意的地方。有时候，我们可能需要根据特定的需求对其进行修改或调整。为了更好地实现这一点，我们必须深入了解其源代码。

深入了解FastClick的源码不仅能帮助我们更好地理解其工作原理，还能让我们在遇到问题时快速定位并解决。通过深入研究其代码结构、算法逻辑和运行机制，我们可以更精确地调整和优化FastClick，以适应我们的具体需求。这样，我们可以充分利用FastClick的优势，提高我们项目的性能和用户体验。

FastClick是一个强大的工具，它能帮助我们解决移动设备上点击延迟的问题，提高页面的响应速度。为了更好地利用这个工具，我们需要深入理解其源码，以便在需要时对其进行适当的修改和调整。希望本文的内容能帮助大家更好地学习FastClick，也希望我们的分享能得到大家的支持和认可。请大家多多关注狼蚁SEO，我们将不断为大家带来高质量、有的内容。让我们一起更多的技术世界！

以上即为本文的全部内容，希望能对大家的学习有所帮助。请继续关注我们的后续更新，我们将不断分享更多有价值的信息和技巧。让我们共同学习、共同进步！