javascript - 在 iOS Safari 中单击会在您点击的下方的元素上触发 "hover state"

Question

在 iOS Safari 11 上，如果我有 <div>定位在具有 :hover 的元素上效果，以及 <div>有一个事件使其在单击时消失，然后我的链接“underneath”在元素从 DOM 中删除后应用悬停效果。

请参阅下面的动画 GIF，了解我正在谈论的内容:

我为按钮设置了透明背景，以便您可以看到其背后的链接。当我在链接不所在的位置点击按钮时，链接(即 Some link )保持蓝色并且不会更改为红色悬停状态。

但是，当我点击 div在恰好位于链接正上方 的位置，在 div 之后从 DOM 中删除后，链接会应用其悬停状态。

在每个正确触发其 on.click 后单击链接事件(警报窗口)。

我没有在 Android 和 Chrome 上看到这个问题(见下面的例子):

您还可以在下面找到我使用的示例 HTML/CSS/JS；设置非常简单。

我想让 iOS 以与 Android Chrome 相同的方式运行:也就是说，单击立即从 DOM 中删除的元素不应触发 :hover紧跟其后的元素的状态。

var button = document.querySelector(".button");
button.addEventListener("click", function() {
  button.parentNode.removeChild(button);
});

var link = document.querySelector('a');
link.addEventListener("click", function() {
  window.alert('clicked!');
});

a:link    { color: blue }
a:visited { color: blue }
a:hover   { color: red }
a:active  { color: green }

.button {
    background: rgba(100, 0, 0, .4);
    position: absolute;
  
    top: 2px;
    left: 2px;
    z-index: 1;

    width: 100px;
    height: 100px;
    line-height: 100px;

    text-align: center;
    border-radius: 5px;
}

.button:hover {
    background: rgba(0, 100, 0, .4);
    cursor: pointer;
}

<a href="#">Some link</a>
<div class="button">Click me!</div>

Answer 1

如果您可以选择禁用悬停，那么您可以通过一些 hack 来实现。

首先在“DOMContentLoaded”事件处理程序中添加这一行。

var canHover = !(matchMedia('(hover: none)').matches);
if (canHover) {
  document.body.classList.add('can-hover');
}

它会将 .can-hover 类添加到您的 html 文档的正文中。

然后只需编辑 a:hover 规则来匹配它

你的CSS规则:

a:hover {
  color: red;
}

应该是:

.can-hover a:hover {
  color: red;
}

这应该可以防止带有触摸屏的设备将悬停样式应用于任何 anchor 。