javascript - 禁用移动浏览器上的悬停效果

Question

我正在编写一个网站，该网站旨在用于台式机和平板电脑。当从桌面访问它时，我希望屏幕的可点击区域亮起 :hover效果(不同的背景颜色等) 对于平板电脑，没有鼠标，所以我不想要任何悬停效果。

问题是，当我点击平板电脑上的某些东西时，浏览器显然有某种“隐形鼠标光标”，它会移动到我点击的位置，然后将其留在那里——所以我刚刚点击的东西会亮起悬停效果，直到我点击其他东西。

如何在使用鼠标时获得悬停效果，而在使用触摸屏时抑制它们？

如果有人想提出建议，我不想使用用户代理嗅探。同一个设备可以同时具有触摸屏和鼠标(今天可能不那么常见，但将来会更多)。我对设备不感兴趣，我对它目前的使用方式感兴趣:鼠标或触摸屏。

我已经试过 Hook touchstart , touchmove , 和 touchend事件和调用 preventDefault()在所有这些上，有时确实会抑制“隐形鼠标光标”；但是如果我在两个不同的元素之间快速来回轻敲，轻敲几下它就会开始移动“鼠标光标”并无论如何都会点亮悬停效果——就像我的 preventDefault并不总是受到尊重。除非必要，否则我不会让你厌烦细节——我什至不确定这是正确的方法；如果有人有更简单的解决方法，我会全力以赴。

编辑:这可以用沼泽标准 CSS :hover 重现，但这里有一个快速复制供引用。

<style>
  .box { border: 1px solid black; width: 150px; height: 150px; }
  .box:hover { background: blue; }
</style>
<div class="box"></div>
<div class="box"></div>

如果您将鼠标悬停在任何一个框上，它将获得我想要的蓝色背景。但是如果你点击其中一个框，它也会得到蓝色背景，这是我试图阻止的事情。

我还发布了一个样本 here执行上述操作并 Hook jQuery 的鼠标事件。您可以使用它来查看点击事件也会触发 mouseenter , mousemove和 mouseleave .

Answer 1

我从您的问题中得知您的悬停效果会更改您页面的内容。在这种情况下，我的建议是:

在 touchstart 上添加悬停效果和 mouseenter .

移除 mouseleave 上的悬停效果, touchmove和 click .

或者，您可以编辑没有内容更改的页面。

背景

为了模拟鼠标，如果用户在触摸屏(如 iPad)上触摸和释放手指，Webkit mobile 等浏览器会触发以下事件(来源:html5rocks.com 上的 Touch And Mouse):

touchstart

touchmove

touchend

300 毫秒延迟，浏览器确保这是单击而不是双击

mouseover

mouseenter

备注 : 如果是 mouseover , mouseenter或 mousemove事件更改页面内容，永远不会触发以下事件。

mousemove

mousedown

mouseup

click

似乎不可能简单地告诉网络浏览器跳过鼠标事件。

更糟糕的是，如果鼠标悬停事件更改了页面内容，则永远不会触发单击事件，如 Safari Web Content Guide - Handling Events 所述。 ，特别是单指事件中的图 6.4。 “内容更改”究竟是什么，将取决于浏览器和版本。我发现对于 iOS 7.0，背景颜色的变化不是(或不再是？)内容变化。

解决方案说明

回顾一下:

在 touchstart 上添加悬停效果和 mouseenter .

移除 mouseleave 上的悬停效果, touchmove和 click .

请注意，对 touchend 没有任何操作。 !

这显然适用于鼠标事件: mouseenter和 mouseleave ( mouseover 和 mouseout 的略微改进版本)被触发，并添加和删除悬停。

如果用户实际上 click s 一个链接，悬停效果也被删除。这可确保在用户按下 Web 浏览器中的后退按钮时将其删除。

这也适用于触摸事件:在 touchstart 上添加了悬停效果。它在 touchend 上“不”被删除。在 mouseenter 上再次添加，并且由于这不会导致内容更改(已添加)，因此 click事件也会被触发，并且无需用户再次单击即可跟踪链接!

浏览器在 touchstart 之间的 300 毫秒延迟事件和 click实际上是很好用的，因为悬停效果会在这么短的时间内显示出来。

如果用户决定取消点击，手指的移动会像往常一样。通常，这是一个问题，因为没有 mouseleave事件被触发，并且悬停效果保持原位。幸运的是，这可以通过移除 touchmove 上的悬停效果轻松解决。 .

就是这样!

请注意，可以移除 300 毫秒延迟，例如使用 FastClick library ，但这超出了这个问题的范围。

替代解决方案

我发现以下替代方案存在以下问题:

浏览器检测:极易出错。假设设备具有鼠标或触控功能，而当触控显示激增时，两者的组合将变得越来越普遍。

CSS 媒体检测:我所知道的唯一纯 CSS 解决方案。仍然容易出错，并且仍然假设设备具有鼠标或触摸功能，而两者都是可能的。

模拟 touchend 中的点击事件:这将错误地跟随链接，即使用户只想滚动或缩放，而无意实际单击链接。

使用变量抑制鼠标事件:这在 touchend 中设置了一个变量在随后的鼠标事件中用作 if 条件以防止该时间点的状态更改。该变量在点击事件中被重置。请参阅本页上 Walter Roman 的回答。如果您真的不想在触摸界面上出现悬停效果，这是一个不错的解决方案。不幸的是，如果 touchend，这将不起作用。由于另一个原因被触发并且没有触发点击事件(例如用户滚动或缩放)，并且随后尝试使用鼠标跟踪链接(即在具有鼠标和触摸界面的设备上)。

进一步阅读

http://jsfiddle.net/macfreek/24Z5M/ .在此沙箱中为自己测试上述解决方案。

http://www.macfreek.nl/memory/Touch_and_mouse_with_hover_effects_in_a_web_browser .同样的答案，有更多的背景。

https://www.html5rocks.com/en/mobile/touchandmouse/ . html5rocks.com 上关于触摸和鼠标的优秀背景文章。

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html . Safari Web 内容指南 - 处理事件。特别参见图 6.4，它解释了在 mouseover 期间内容更改后不会触发更多事件。或 mousemove事件。