解决:hover在ios移动端需要二次点击的问题

小米居士2023-09-13 16:17

最近遇到了个bug，就是我在pc端给按钮的外层 div加了hover样式，但是在ios移动端查看效果时，因为添加了hover效果，所以需要点击2次，第一次点击是给div添加hover样式，第二次点击a标签才跳转。

具体看一下问题

css 复制代码

a::after {
    display: none;
    content: "pseudo block!";
}
a:hover::after {
    display: inline;
}

在带有光标指针的浏览器上，您将看到伪元素显示在:hover

但点击该链接并不会阻止该链接被访问。但在 iOS 上，点击链接只会显示伪元素。需要第二次点击才能真正转到该链接。

安卓好像没有这个功能。它会很快显示伪元素，但也只是像平常一样转到链接。

下面给出一些解决此问题的思路

使用媒体查询来禁用 hover 样式

有一个指针媒体查询对我们可能有用：

css 复制代码

@media (pointer: fine) {
    a::after {
    display: none;
    content: "pseudo block!";
  }
    a:hover::after {
    display: inline;
  }
}

还有一个直接悬停媒体查询的规范:

css 复制代码

@media (hover:hover) {}

为了解决这个问题，可以使用 CSS 的 touch-action 属性来禁用 iOS 上的 "hover delay"。将 touch-action 属性设置为 manipulation 可以告诉浏览器在触摸设备上禁用默认的滚动行为和 "hover delay"。例如：

css 复制代码

.outer-div {
  touch-action: manipulation;
}

通过添加上述 CSS 样式，可以禁用 "hover delay"，使按钮的点击事件能够直接触发，而不会先触发外层 div 的 hover 效果。

实测能解决问题，但是稍微手抖的话，还是不能触发点击事件。

在触发点击事件的元素上增添一个@touchstart 事件，方法与@click 相同

html 复制代码

<div @click = "handleClick" @touchstart = "handleClick"></div>

此方法比设置 touch-action 更加灵敏，效果更好。