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脚本）。然后，当您点击不是活动菜单的任何地方时，请删除这些类。

所以，关于这个问题：是否可以修改focusout位的脚本以适应从菜单或它的孩子那里获取？如果没有，我将如何编写第二个脚本来完成该任务？

您可以在以下网址查看现场演示：

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");
    }
});

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

1 个答案: