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

Question

我正在寻找解决网站在触摸设备上遇到的问题。在桌面上，有一排导航 link，悬停时每个导航都会放下自己的弹出窗口。然而，在触摸设备上，没有悬停事件，所以我正在寻找模拟它的最佳方法。

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

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

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

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

触发这些弹出窗口的显示，它似乎有效，但我无法完全正确地关闭这些弹出窗口。我对此做了一些研究，其他一些人正在做这样的事情：

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

作为监听页面上任意位置的触摸然后强制关闭当前打开的弹出窗口的方式。然而，这似乎有点粗糙，意味着如果用户触摸弹出窗口本身的某处，弹出窗口将关闭，这是不可取的。在这里使用 jQuery 的 not 选择器并排除所有可以触摸以关闭弹出框的区域的弹出框会更好，还是有更好的方法来处理这个问题？我试图实现的一个很好的例子是亚马逊如何在主导航的右侧处理弹出窗口。点击一次打开，再次点击跟随 link，或点击 tap/scroll 关闭弹出窗口。我正在推动完全重构这些弹出窗口的处理方式，以便从一开始就考虑 mobile/touch，但至少现在，我想找出一种方法来实现我上面提到的内容。

提前致谢。

Answer 1

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

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

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

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

How do I handle (well, mock) hover behaviour on a touch device?

javascript

jquery

mobile-safari

jquery-mobile