javascript - iPad 在通过 AJAX 加载内容后触发元素悬停效果

Question

我的网页在 iPad 上出现了非常奇怪的行为(仅限)。我的 Web 应用程序基于 AJAX 加载。因此，页面的某些部分(例如过滤器和主线框)是静态的，但计算出的主要内容是通过 AJAX 加载的。

在内容中，用户已检查的过滤器选项由 div 元素(过滤器芯片)表示，就像在其他页面(如 ebay 或其他任何地方)一样。用户可以通过 X-ing 这样的芯片来取消选中过滤器，或者只需单击静态内容上的过滤器复选框。芯片后面还有一个链接，以便一次重置/删除所有过滤器选项。

在过滤器芯片部分下，还有另一个部分用于对页面上的结果集进行排序。它表示为占据整个宽度的条/梁。

看起来像下面这样:

--------------------------------------------
| filter1 filter2 filter3 reset_all_filters | <--- FilterChips section
|--------------------------------------------
| sortByA | sortByB | sortByC | sortByD | <--- Sorting section
--------------------------------------------

单击 reset_all_filters 链接会导致重新加载内容。加载后，用户在重置后将看不到 FilterChips 部分，并且整个内容会向上移动。因此，Sorting 部分现在正好位于 FilterChips 部分之前所在的位置。

有趣的是，内容加载后，单击的 reset_all_filters-link 正下方的排序项会出现悬停效果。

我假设点击指针仍然停留在该位置并导致下方的元素悬停。

对于那些想知道为什么 FilterChips 部分或 Sorting 部分属于加载内容的人:这确实是我/我们(公司)必须重新考虑的事情。但与此同时，我们必须处理它。

那么对于我的问题有什么建议吗？感谢您的帮助!

Answer 1

在 2013 年 1 月的一个较旧的问题中，有人在 Apple 的文档中指出，这被描述为一种预期的行为。

https://stackoverflow.com/a/48217487/1503923

此处引用:

This seems to be intended behaviour in Safari. Apple's documentation says that single-finger taps are handled as mouse events, and shows which events are raised during a tap. There's a mouseover at the start of the tap, but a mouseout is only triggered when you click on something else. This implies that Safari assumes that the pointer stays in the same place until the next tap, which would mean it makes sense for the lower element to be in the hover state.

---

要解决您的问题，您必须在您的 css 中应用某种媒体查询或特殊的 css 规则，这将避免为您的 :hover 元素设置不同类型的样式。

a:hover { background-color: blue; }

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
    a:hover { background-color: transparent; }
}

或某种其他处理方式来确定您的用户是否拥有可能会出现此问题的 ipad 或任何其他平板电脑设备。