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

Question

我的问题如下：在我的本地网站上，我的主菜单有悬停效果（边框底部）。我们知道，对于带触摸设备的访问者来说，只需双击即可轻松点击链接。是否有机会仅在触摸设备上禁用悬停效果？

我已经尝试过以下内容：

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

事实上，这很有效。我不需要双击链接，它工作正常但在我的桌面电脑上所有正常target="_blank"链接加载一个额外的选项卡（像往常一样），但也在同一个选项卡中。所以外部链接打开两次。有没有机会避免这种情况？

我希望你理解我的意思。

提前致谢！

Answer 1

哦......我用两种方法再次测试了它。现在PC版工作正常，但iPad版本没有（打开一个新的选项卡并加载到同一个）。所以它与这些方法完全相反：/

Answer 2

如评论中所述，只需忽略＆＃34;点击＆＃34;。当然，您的桌面浏览器会侦听click事件，因此会执行处理程序。

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

如果您想打开带有target =＆＃34; _blank＆＃34;的链接在移动设备上的新选项卡中，您应该考虑到这一点，检查目标并在这种情况下使用window.open（）而不是window.location。

请记住，现在有台式电脑带有触控功能的显示器，它们也会收听＆＃34; touchend＆＃34;事件并将打开链接两次。因此，检查是否真的有必要在第二次点击时打开链接，而不是首先点击第一次点击。