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

Question

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

我已经尝试过以下操作:

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

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

希望你明白我的意思。

提前致谢!

Answer 1

正如评论中所述，只需省略“点击”即可。当然，您的桌面浏览器会监听单击事件，从而执行处理程序。

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

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

还请记住，现在有一些带有触摸显示屏的台式电脑，它们也会监听“touchend”事件并打开链接两次。因此，最好检查一下是否确实有必要在第二次单击时打开链接，而不是在第一次单击时打开链接。