Question

当许多移动用户在 iPhone 11 上遇到奇怪行为时的一种奇怪情况：

HTML 按钮元素不会改变状态 - 它在点击/点击事件后保持其 :hover 状态

如何最好地使用 JavaScript 强制/更改 button element 的 DOM 状态？

<button id="whateverID">
  <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false" aria-hidden="true" data-icon="check" data-prefix="far" id="ember1228" class="svg-inline--fa fa-check fa-w-16 ember-view">
    <path fill="currentColor" d="M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"></path>
  </svg> in basket
</button>

以下 jQuery 请求返回 true：

$('#whateverID').is(":hover")

我们想要执行一些 JavaScript，以便上面的命令返回 false
也许修复代码会附加到 tap event 或 click event。

重要请先复制问题，然后再发布任何解决方案。
要复制打开的 Chrome DevTools 并模拟移动设备，请触摸按钮。

例如，点击按钮即可解决问题，但如果可能，我们希望不必点击。

Answer 1

预计浏览器将改进对触摸设备上 :hover 状态的支持以及解决该问题的最佳方法：this Mozilla developer article 具有以下免责声明：

<块引用>

注意： :hover 伪类在触摸屏上有问题。根据浏览器的不同，:hover 伪类可能永远不会匹配，触摸元素后仅匹配片刻，或继续即使在用户停止触摸并且直到用户触及另一个元素。 Web 开发人员应确保内容可在具有有限或不存在悬停的设备上访问能力。

对于 Safari 浏览器，我们有：

<块引用>

从 iOS 7.1.2 的 Safari 开始，点击 clickable element 会导致元素进入 :hover 状态。该元素将保留在 :hover 状态，直到不同的元素进入 :hover 状态。

对于 Edge 浏览器，我们有：

<块引用>

在 Edge 中，将鼠标悬停在元素上然后向上或向下滚动不移动指针将使元素处于 :hover 状态直到指针移动。见bug 5381673。

对于 Internet Explorer，我们有：

<块引用>

在 Internet Explorer 8 到 Internet Explorer 11 中，将鼠标悬停在元素然后向上或向下滚动而不移动指针将将元素保持在 :hover 状态，直到指针被移动。看 bug 926665。

<块引用>

在 Internet Explorer 9（可能更早版本）中，如果具有非自动宽度的父级 overflow-x: auto;，具有足够的内容水平溢出其父级，并且有 :hover 样式设置在表格内的元素上，然后将鼠标悬停在所述元素将导致的高度增加。 See a live demo that triggers the bug。该错误的一种解决方法是设置最小高度：0%；（必须指定 % 单位，因为无单位和 px 不起作用）在的父元素上。

另见

当悬停状态触发触摸事件时，通过 JS 更改按钮悬停状态

1 个答案: