參考資料：https://www.youtube.com/watch?v=w-SpaTBf-j0

在製作https://codepen.io/arvjungs-the-animator/pen/zxORxvo?editors=1010的切版練習時

左上角的手機選單原想製作一個自動收合的功能

// 當滑鼠滑出collapseMenu區塊,觸發事件-為collapse-menu取消active class
collapseMenu.addEventListener("mouseleave", () => {
collapseMenu.classList.remove("active");
});

下意識寫了mouseleave的事件監聽器

然而才發現手機並沒有所謂mouseleave的事件

(ps 假設妳有文字hover會變色 觸控裝置會變成點這個文字之後會一直變色 直到妳點其他地方)

這時改採用focus

https://zh.javascript.info/focus-blur

//當focus ham-btn,觸發事件-為collapse-menu加上active class
const hamBtn = document.querySelector(".ham-btn");
const collapseMenu = document.querySelector(".collapse-menu");
hamBtn.addEventListener("focus", () => {
collapseMenu.classList.toggle("active");
});
hamBtn.addEventListener("blur", () => {
collapseMenu.classList.remove("active");
});

發現在電腦上運作正常 ：點擊btn打開選單，點擊其他關閉選單

然而手機毫無反應LOL手機沒focus事件謝謝

邏輯是這樣的：當不在menu上點擊 且 用戶所點擊的元素不是btn本身時，為collapseMenu移除active的class

//當不在menu上點擊 且 用戶所點擊的元素不是btn本身,移除active class
document.addEventListener("click", (e) => {
if (!collapseMenu.contains(e.target) && e.target !== collapseBtn) {
collapseMenu.classList.remove("active");
}
console.log(e.target!== collapseBtn);
});

然而卻沒有用，原因是發現當滑鼠在漢堡按鈕上點擊時，console.log(e.target!== collapseBtn);會瘋狂的印出true：

於是改印出console.log(e.target)看看到底點擊了什麼，發現原來滑鼠在點擊漢堡按鈕時，有以下兩種可能：

<i class="fa-solid fa-bars"></i> -當你很準確按在三條線上時