我正在尝试编写一些 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 观看现场演示:
最佳答案
我想通了,但我不知道这是最好的方法。将事件附加到整个文档似乎有点愚蠢,但这可行:
// 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");
}
});
关于javascript - 如何检测用户何时触摸菜单或其子项以外的其他内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38833994/