返回

击碎IOS移动端:hover的二次点击怪圈

前端

:hover伪类在IOS移动端存在一个问题：需要二次点击才能触发。这是一个常见的问题，但解决起来其实很简单。本文将介绍三种解决方法：禁用 hover 样式、使用 touch-action 属性和使用 touchstart 事件。

禁用 hover 样式

最简单的方法是禁用 hover 样式。这可以通过在 CSS 中将 hover 伪类的所有样式设置为 none 来实现。例如：

a:hover {
  color: none;
  background-color: none;
  text-decoration: none;
}

这样，当用户在移动端点击链接时，就不会再出现二次点击的问题了。但是，这种方法也有一个缺点：它会禁用所有 hover 样式，包括那些在桌面端正常工作的 hover 样式。

使用 touch-action 属性

另一种解决方法是使用 touch-action 属性。该属性可以指定元素的触摸行为。在 IOS 移动端，可以将 touch-action 属性设置为 manipulation，以防止元素在被触摸时触发 hover 事件。例如：

<a href="http://example.com" touch-action="manipulation">
  Click me!
</a>

这样，当用户在移动端点击链接时，就不会再出现二次点击的问题了。而且，这种方法不会禁用所有 hover 样式，只会在移动端禁用 hover 事件。

使用 touchstart 事件

最后一种解决方法是使用 touchstart 事件。该事件会在用户首次触摸元素时触发。可以通过在 JavaScript 中监听 touchstart 事件，然后阻止默认行为来解决二次点击的问题。例如：

document.querySelectorAll('a').forEach(function(link) {
  link.addEventListener('touchstart', function(e) {
    e.preventDefault();
    window.location.href = this.href;
  });
});

这样，当用户在移动端点击链接时，就不会再出现二次点击的问题了。而且，这种方法不会禁用所有 hover 样式，只会在移动端禁用 hover 事件。

这三种方法都可以解决 IOS 移动端 :hover 的二次点击问题。选择哪种方法取决于您的具体情况。如果禁用 hover 样式或使用 touch-action 属性会影响您的网站设计，那么可以使用 touchstart 事件。