作为一种新兴的 Web 应用模式，PWA（Progressive Web App）已经越来越受到前端开发者的关注和追捧。然而，PWA 应用在 Safari 浏览器上出现无法响应点击事件的问题也一直困扰着开发者。本文将详细介绍这个问题的原因和解决方法，并提供示例代码和实用的指导意义。
问题原因
PWA 应用在 Safari 浏览器上无法响应点击事件的问题，其原因在于 Safari 对 touch 事件的兼容性不同于其他浏览器。一些开发者在使用 Vue 或 React 等前端框架时，可能会使用类似如下的代码来处理点击事件：
-- -------------------- ---- -------
----------
---- ------------------------------
-----------
--------
------ ------- -
-------- -
------------- -
---------------------
-
-
-
---------然而，上述代码在 Safari 浏览器上，点击后并没有触发 handleClick 函数。这是因为 Safari 在移动端通过 touch 事件来处理点击事件，而不是直接的 click 事件。因此，上述代码需要做出一些修改，才能够在 Safari 上正常工作。
解决方法
针对上述问题，我们可以通过一些技巧来解决：
1. 使用 @touchstart 事件
在 vue 框架中，我们可以使用 @touchstart 事件来处理 Safari 上的点击事件：
-- -------------------- ---- -------
----------
---- -----------------------------------
-----------
--------
------ ------- -
-------- -
------------- -
---------------------
-
-
-
---------这样，当用户在 Safari 中点击该元素时，就能够正常触发 handleClick 函数。
2. 使用移动端点击库
除了使用 @touchstart 事件以外，我们还可以使用一些移动端点击库来解决该问题，比如 FastClick。这种库会在移动端初始化 touch 事件，从而解决 Safari 上的点击事件问题。
我们可以在 HTML 文件中引入 fastclick.js 并初始化：
<script src="path/to/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
</script>然后就可以像平常一样绑定 click 事件，即可在 Safari 上正常工作。
3. 使用 CSS active 伪类
最后一个方案是使用 CSS active 伪类来模拟点击事件，即在用户点击时改变样式，实现点击效果。
-- -------------------- ---- -------
----------
---- ------------------------------
--------------------------
-----------------------------
-------------------------
---------------------------
-----------
-------
---------- -
------- --------
-
----------------- -
----------------- -----
------ -----
-
--------
--------
------ ------- -
-------- -
------------- -
---------------------
--
------------------ -
-------------- - -----
--
---------------- -
-- ---------------- -
-------------- - ------
-------------------
-
-
-
-
---------通过在样式中为元素添加 active 样式，在用户点击时改变样式，实现点击效果。同时使用 @touchstart 和 @touchend 事件来监听 touch 事件，使用 @mousedown 和 @mouseup 事件来监听 click 事件。最终实现移动端和 PC 端的点击效果。
总结
针对 PWA 应用在 Safari 上无法响应点击事件的问题，我们提供了三种解决方案：
- 使用 @touchstart 事件
- 使用移动端点击库，如 FastClick
- 使用 CSS active 伪类
这些方案都可以让你的 PWA 应用在 Safari 上正常工作，提供更好的用户体验。同时，这些技巧也有着广泛的适用性，可以应用于其他 Web 应用中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eb297af6b2d6eab35cf98d