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



我在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 部分,并且整个内容向上移动。因此,排序部分现在正好位于 FilterChips 部分之前的位置。

有趣的是,点击的reset_all_filters链接正下方的排序项目在加载内容后会获得悬停效果。

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

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

那么对我的问题有什么建议吗?感谢每一个帮助!

在 1 月 13 日的一个较早的问题中,有人在 Apple 的文档中表示,这被描述为预期的行为。

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

这里引用:

这似乎是 Safari 中的预期行为。Apple的文档说,单指点击作为鼠标事件处理,并显示点击期间引发的事件。点击开始时有一个鼠标悬停,但只有在您单击其他内容时才会触发鼠标悬停。这意味着 Safari 假设指针在下一次点击之前一直停留在同一位置,这意味着较低元素处于悬停状态是有意义的。


要解决您的问题,您必须在 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或任何其他平板电脑设备。

最新更新