仅在触控设备上禁用悬停效果答案

【问题标题】：Disable Hover Effect only on Touch Devices仅在触控设备上禁用悬停效果
【发布时间】：2015-04-24 12:34:31
【问题描述】：

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

我已经尝试过以下方法：

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

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

希望你明白我的意思。

提前致谢！

【问题讨论】：

在 click 和 touchend 之间加一个逗号
errrm... 在 jQuery 的 .on() 中分隔多个事件的正确方法是使用空格，而不是逗号。我猜它起作用的唯一原因是首先不需要“click”事件，并且没有为其添加侦听器，因为“click”不是有效的事件类型。只需完全删除点击并离开 on('touchend', ... 就足够了。

【解决方案1】：

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

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

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

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

【讨论】：

恐怕我没有理解：/ 我按照你说的做了，现在它可以在（PC 和 iPad）上运行。但是你说的触摸电脑是什么意思？现在 target="_blank" 链接只在新标签中打开 - 这就是我想要的方式。

【解决方案2】：

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

【讨论】：