javascript - How can I detect when a user touches something other than a menu or it's children? -

i'm trying write javascript handle touch interactions on drop down menu. working well, except can't figure out how hide menu when user taps away it.

my script follows:

// mark menu items inative function mark_all_inactive(elem) {     elem.find(".is-active").removeclass("is-active");     elem.find("[aria-hidden=false]").attr("aria-hidden", "true"); }  // mark element 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 next element 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);     } }); 

as can see, i'm using touchstart add classes, works perfectly. issue arises when trying remove classes.

the focusout bit of code used keyboard navigation, i'd adapt trigger when tap away menu.

from understand, mobile browsers typically don't fire focusout when tapping away something. seems odd me, you'd think tapping away surly fire focusout regardless of input type, that's beside point.

i have looked in touchend, appears fire after lifting finger, isn't want. goal tap once add classes, able lift finger select child link (which can contain flyout menus, re-using same touchstart script). then, when tap anywhere that's not active menu, remove classes.

so, on question: can focusout bit of script modified accommodate tapping away menu or it's children? if not, how go writing second bit of script accomplish task?

you can view live demo @ follow url:

https://framework.ghostlyco.de/

i figured out, don't know it's best way. seems kind of dumb attach event entire document, works:

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