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

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

本文关键字：悬停 触摸 何处理 处理 好吧 模拟      更新时间：2023-09-26

我想解决一个网站在触摸设备上的问题。在桌面上，有一行导航链接，悬停时每个链接都会弹出自己的弹出按钮。然而，在触摸设备上，没有悬停事件，所以我正在寻找最好的方式来嘲笑它。

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

  • 用户在菜单项上点击一次，弹出按钮就会显示出来
  • 然后，用户可以点击弹出按钮中的链接，如果他们愿意或
  • 用户可以再次点击菜单项，然后按照该页面的链接进行操作
  • 用户可以点击页面上的任何其他位置（或滚动），弹出按钮就会关闭

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

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

触发这些弹出按钮的显示，它似乎起到了作用，但我无法完全正确地关闭这些按钮。我对此做了一些研究，其他一些人正在做一些事情，比如：

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

以监听页面上任何位置的触摸，然后强制关闭当前打开的弹出按钮。然而，这似乎有点粗糙，意味着如果用户触摸弹出按钮本身的某个地方，弹出按钮就会关闭，这是不可取的。在这里使用jQuery的not选择器并排除可以触摸以关闭弹出按钮的区域的所有弹出按钮会更好吗？或者有更好的方法来处理这一问题吗？我试图实现的一个很好的例子是亚马逊如何在主导航的右侧处理弹出按钮。点击一次以打开，再次点击以跟随链接，或点击/滚动其他任何位置以关闭弹出按钮。我正在努力彻底重构这些弹出按钮的处理方式，以便从一开始就考虑移动/触摸，但至少目前，我想找到一种实现上述目标的方法。

提前谢谢。

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

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

在这个例子中，我使用的是jQueryclosest（）函数，它似乎非常适合这种情况。

相关文章：