在iOS Safari中点击会在您点击的位置下方的元素上触发"悬停状态"。

10 浏览
0 Comments

在iOS Safari中点击会在您点击的位置下方的元素上触发"悬停状态"。

在iOS Safari 11上，如果我在一个有:hover效果的元素上方放置一个，并且有一个点击后消失的事件，那么当元素从DOM中移除后，位于其下方的链接会获得:hover效果。请看下面的动态GIF图：

iOS click through

我给按钮设置了透明背景，这样你可以看到它后面的链接。当我点击按钮时，如果链接不在按钮的位置上，链接（即Some link）保持蓝色，不会变为hover状态的红色。

然而，当我点击的div恰好位于链接正上方时，在div从DOM中移除后，链接会应用:hover状态。

每次点击链接后都会正确触发其on.click事件（弹出一个警告窗口）。

我在安卓上的Chrome浏览器上没有看到这个问题（请参见下面的示例）：

Android click through working

下面还有我使用的示例HTML/CSS/JS代码；设置非常简单。

我希望iOS的行为与安卓上的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;
}

Some link
Click me!

0