ユーザーがメニュー以外のものに触れたとき、または子供に触れたときを検出するにはどうすればよいですか？

Question

私は、ドロップダウンメニューでタッチのやりとりを処理するためのJavaScriptを記述しようとしています。これは、ユーザーがメニューをタップしたときにメニューを非表示にする方法を理解できないことを除いて、うまくいきます。あなたが見ることができるように、私は完璧に動作するいくつかのクラスを追加するtouchstartを使用してい

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

次のように

私のスクリプトです。これらのクラスを削除しようとすると、問題が発生します。

コードのfocusoutビットは、主にキーボードナビゲーションに使用されますが、メニューからタップするとトリガーするように調整したいと思います。

私が理解から何かから離れてタップしたときに、携帯電話のブラウザでは、通常focusoutを発射しないでください。あなたが何かから離れてタップすると入力タイプに関係なくfocusoutが発生しないと思うので、それは私には奇妙に思えるかもしれませんが、それはポイントの横にあります。

私はtouchendにして見てきたが、それは私が欲しいものではありません、あなたの指を、持ち上げた直後に火災に表示されます。目標は、クラスを追加するために一度タップし、子のリンクを選択するために指を持ち上げることができます（フライアウトメニューも含むことができ、同じtouchstartスクリプトを再利用できます）。次に、アクティブなメニューではない場所をタップすると、クラスが削除されます。質問へのだから、

、：スクリプトのfocusoutビットは、メニューから離れてタップするか、それは子供のように修正することはできますか？そうでない場合は、そのタスクを達成するために2番目のスクリプトを書くにはどうしたらいいですか？

あなたは以下の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"); 
    } 
});