Question

我正在寻找修复网站在触控设备上遇到的问题。在桌面上，有一排导航链接，在悬停时，每个链接都会自动弹出。但是，在触摸设备上，没有悬停事件，所以我正在寻找最好的模拟方法。

我希望在触控设备上实现的行为如下：

用户点击一个菜单项并显示弹出按钮
然后，用户可以根据需要点击弹出窗口中的链接或
用户可以再次点击该菜单项并点击该页面的链接
用户可以点击页面上的任何其他位置（或滚动），弹出窗口将关闭

我最初尝试使用类似的东西：

$('nav-item').on(‘touchstart’, function() {
  ...
});

触发这些弹出窗口的显示，它似乎工作但我无法完成这些正确的关闭。我对此进行了一些研究，其他一些人正在做的事情如下：

$(‘html’).on(‘touchstart’, function() {
  ...
});

用于在页面的任何位置侦听触摸，然后强制关闭当前打开的弹出按钮。然而，这看起来有点粗糙，并且意味着如果用户触摸弹出窗口中的某处，则弹出窗口将关闭，这是不可取的。在这里使用jQuery的not选择器并排除可以触及的区域的所有弹出窗口以关闭弹出窗口是否更好？还是有更好的方法来处理它？我想要实现的一个很好的例子就是亚马逊如何在主导航的右侧处理他们的弹出窗口。点击一次打开，再点击以关注链接，或点击/滚动其他任何位置以关闭弹出按钮。我正在努力完全重构这些弹出窗口的方式，以便从一开始就考虑移动/触摸，但至少现在，我想找到一种方法来实现我上面提到的。

提前致谢。

Answer 1

您可以将touchstart事件放在document，html或body上，然后检查触摸的目标DOM元素是弹出窗口还是其后代之一。如果没有，请关闭它：

$(document).on('touchstart', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});

在这个例子中，我使用的是jQuery closest() 函数，它似乎非常适合这种情况。

如何在触摸设备上处理（好吧，模拟）悬停行为？

1 个答案: