仅在触摸设备上禁用悬停效果

Question

我的问题如下：在我的本地网站上，我的主菜单有悬停效果（边框底部）。正如我们所知，使用触摸设备的访问者需要双击才能真正点击 link。是否有机会仅在触摸设备上禁用悬停效果？

我已经尝试过以下方法：

$('a').on('click touchend', function(e) {
  var el = $(this);
  var link = el.attr('href');
  window.location = link;});

事实上这很好用。我不需要双击 link，它工作正常，但在我的台式电脑上一切正常 target="_blank" links 加载到一个额外的选项卡（像往常一样），但也在相同的标签。所以外部 links 打开了两次。有机会避免这种情况吗？

希望你明白我的意思。

提前致谢！

Answer 1

哦...两种方法我都测试了一遍。现在 PC 版本可以正常工作，但 iPad 版本不能（打开一个新选项卡并在同一个选项卡中加载）。所以这些方法正好相反：/

Answer 2

如评论中所述，只需省略 "click"。当然，您的桌面浏览器会监听点击事件，因此会执行处理程序。

$('a').on('touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;});

如果您也想在移动设备的新标签页中打开带有 target="_blank" 的链接，您应该考虑到这一点，检查目标并在这种情况下使用 window.open() window.location.

另请记住，现在有配备触控显示屏的台式电脑也将侦听 "touchend" 事件并打开链接两次。因此，最好检查一下是否真的有必要在第二次单击时打开链接，而不是在第一次单击时打开链接。

Disable Hover Effect only on Touch Devices