iOS Safari 中的点击会触发点击位置下方元素的“悬停状态”

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

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

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

然而，当我点击div在一个恰好是的地方直接在链接之后div从 DOM 中删除后，链接将应用其悬停状态。

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

I do not在 Chrome 上的 android 上查看此问题（请参阅下面的示例）：

您还可以在下面找到我使用的示例 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>

如果您可以选择禁用悬停，那么您可以通过一些技巧来做到这一点。

首先在“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;
}

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