javascript - 如何检测用户何时触摸菜单或其子项以外的其他内容？

Question

我正在尝试编写一些 JavaScript 来处理下拉菜单上的触摸交互。这工作得很好，只是我不知道当用户点击菜单时如何隐藏菜单。

我的脚本如下:

// mark all menu items as inative
function mark_all_inactive(elem) {
    elem.find(".is-active").removeClass("is-active");
    elem.find("[aria-hidden=false]").attr("aria-hidden", "true");
}

// mark element as active
function mark_active(elem) {
    elem.closest(".menu-list_item").addClass("is-active");
    elem.siblings("[aria-hidden]").attr("aria-hidden", "false");
}

// open on touchstart
jQuery(".menu-list_item").not(".menu-list_item.-mega .menu-list_item.-parent").on("touchstart", function(e) {
    if (!jQuery(this).hasClass("is-active") && jQuery(this).children("[aria-hidden]").length) {
        e.preventDefault();
        mark_all_inactive(jQuery(this).closest(".menu-list"));
        mark_active(jQuery(this).children(".menu-list_link"));
    }
});

// hide on focusout
jQuery(".menu-list").on("focusout", ".menu-list_link", function() {
    var parent_item = jQuery(this).closest(".menu-list_item.-parent.is-active");

    if (parent_item.length) {
        // timeout required for the next element to get focus
        setTimeout(function() {
            if (!parent_item.find(":focus").length) {
                parent_item.removeClass("is-active");
                parent_item.children("[aria-hidden]").attr("aria-hidden", "true");
                parent_item.closest(".menu-list_item.-parent.is-active").find(".menu-list_link").first().trigger("focusout");
            }
        }, 10);
    }
});

如您所见，我正在使用 touchstart 添加一些类，效果非常好。当尝试删除这些类时就会出现问题。

代码的focusout位主要用于键盘导航，但我想对其进行调整，以便在您点击远离菜单时也触发。

据我了解，移动浏览器在点击某物时通常不会触发focusout。这对我来说似乎很奇怪，因为您可能会认为无论输入类型如何，从某些东西上敲击肯定会触发 focusout，但这不是重点。

我查看了 touchend，但它似乎在抬起手指后立即触发，这不是我想要的。目标是点击一次即可添加类，然后能够抬起手指来选择子链接(也可以包含弹出菜单，从而重新使用相同的 touchstart 脚本)。然后，当您点击非 Activity 菜单的任何位置时，删除这些类。

那么，问题是:是否可以修改脚本的 focusout 位以适应远离菜单或其子菜单的点击操作？如果没有，我将如何编写第二部分脚本来完成该任务？

您可以通过以下 URL 观看现场演示:

https://framework.ghostlyco.de/

Answer 1

我想通了，但我不知道这是最好的方法。将事件附加到整个文档似乎有点愚蠢，但这可行:

// hide on touch away
jQuery(document).on("touchstart", function(e) {
    if (!jQuery(e.target).closest(".menu-list_item.-parent.is-active").length) {
        jQuery(".menu-list_item.-parent.is-active").children("[aria-hidden]").attr("aria-hidden", "true");
        jQuery(".menu-list_item.-parent.is-active").removeClass("is-active");
    }
});