iOS Safari中的点击触发“悬停状态”在你点击的地方下面的元素上 [英] A click in iOS Safari triggers a "hover state" on element underneath where you tapped

问题描述

在iOS Safari（我认为它不是iOS的哪个版本，但是我在iOS（Safari）11上测试），如果我有< ; div> 位于具有：hover 效果的元素上，而< div> 有一个事件让它在点击时消失，然后我的链接underneath在元素从DOM中移除后得到悬停效果。

请参阅下面的内容对于我所说的动画GIF：

我给这个按钮一个透视背景，所以你可以看到它背后的链接。当我点击链接不是的地方时，链接（即某个链接）保持蓝色，并且不会更改为它的悬停状态为红色。

然而，当我点击 c $ c> div >直接在链接上，在从DOM中删除 div 后，链接将应用悬停状态。

点击链接后，每个链接都会正确触发它的 on.click 事件（一个警报窗口）。

在Chrome上的Android上看不到此问题（请参阅下面的示例）：
$ b a>

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

我想让iOS的操作方式与Android Chrome相同：即单击立即从 不应触发：hover 状态。

a：link {color：blue } a：visited {color：blue} a：hover {color：red} a：active {color：green} .button {backgro und：rgba（100，0，0，.4）;位置：绝对; top：2px; left：2px; z-index：1;宽度：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文档的正文中。 / p>

然后只需编辑一个：hover规则来匹配它，而不是

您的css规则：

  a：hover {
 color：red; 
 
 
 
 $ b $ p $应该是：
 
   pre>  .can-hover a：hover {
 color：red; 
} 
  

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


On iOS Safari (I don't think it matters which version of iOS, but I'm testing on iOS (Safari) 11), if I have a <div> positioned over an element that has a :hover effect, and the <div> has an event that makes it disappear when clicked, then my link "underneath" gets the hover effect applied after the element is removed from the DOM.

See below for an animated GIF of what I'm talking about:

I've given the button a see-through background so you can see the link behind it. When I tap the button in on a spot where the link is not located, the link (i.e. Some link) stays blue and does not change to its hover state of red.

However, when I tap the div in a spot that happens to be directly over the link, after the div is removed from the DOM, the link gets its hover state applied.

Clicking the link after each of these correctly triggers its on.click event (an alert window).

I do not see this issue on android on Chrome (see example below):

Below you'll also find the sample HTML/CSS/JS I used; the setup is pretty simple.

I'd like to have iOS act in the same way Android Chrome does: that is, clicking on an element that is immediately removed from the DOM should not trigger a :hover state for an element immediately behind it.

document.addEventListener("DOMContentLoaded", function ready() {
  var button = document.querySelector(".button");
  button.addEventListener("click", function() {
    button.parentNode.removeChild(button);
  });
  
  document.querySelector('a').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>

解决方案

If you have option to disable hover then you can do that with bit of hack.

First add this line in "DOMContentLoaded" event handler.

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

It will add .can-hover class to body of your html document.

Then just edit a:hover rule to match this instead

your css rule:

a:hover {
  color: red;
}

should be:

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

this should prevent devices with touch screen to apply hover style to any anchor.

这篇关于iOS Safari中的点击触发“悬停状态”在你点击的地方下面的元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！