问题背景
在使用 PWA（渐进式 Web 应用）开发过程中，我们可能会发现双击事件无法触发，而单击事件却能正常触发。这个问题可能会让我们的 PWA 应用体验变得不够友好，因为很多用户都有点双击的习惯。
问题原因
在 PWA 应用中，由于 service worker 的介入，浏览器会将所有的事件转发到服务线程中处理，包括双击事件。但是，由于 service worker 的线程不是 UI 线程，无法直接操作 DOM 元素，所以双击事件无法被正确地处理。
解决方案
经过调研和实践，我们有以下两种解决方案：
方案一：使用 touchstart 和 touchend 事件模拟双击事件
我们可以通过监听 touchstart 和 touchend 事件，手动模拟一个双击事件：
-- -------------------- ---- -------
--- ----------- - --
-------- ----------- -
--- ----------- - --- -----------------
-- ------------ - ----------- - ---- -
-- ------
------------------------
- ---- -
-- ------
------------------------
------------- -- -
----------- - --
-- -----
-
----------- - ------------
-
--------------------------------------- ---------- -------
------------------------------------- ---------- -------方案二：监听 mousedown 和 mouseup 事件，并将其转化为 click 事件
我们可以通过监听 mousedown 和 mouseup 事件，手动模拟一个 click 事件：
-- -------------------- ---- -------
-------- --------------------- -
-- ------------- --- -- -
---------------------------------
-----------------------
-------
-
-
-------------------------------------- --------------- ------
------------------------------------ --------------- ------其中，详情为 2 的事件被认为是双击事件，我们需要将其拦截下来，并阻止其默认行为和事件冒泡。
知识拓展：PWA
PWA，全称 Progressive Web App，是一种新的 Web 应用模型，旨在为用户提供更好的体验，向用户提供更快、更可靠和更具吸引力的 Web 应用程序。PWA 充分利用 Web 技术的优势，可以安装到用户的设备上，就像本机应用一样，也可以在离线状态下缓存数据。
要开发 PWA，我们需要掌握 Web App Manifest、Service Worker、Push Notifications 和 App Shell 等技术。
总结
通过以上两种解决方案，我们可以解决 PWA 应用中双击事件无法触发的问题。同时，我们对 PWA 这一新的 Web 应用模型也有了更深入的了解。在未来的开发实践中，我们可以继续探索 PWA 的更多技术和应用场景，提升用户体验，为 Web 开发带来更多可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6502c93995b1f8cacd001558