有一個固定的div，當用戶點擊一個按鈕時，會顯示一些鏈接。 出于可訪問性的目的，我想在這個 div 失去鍵盤焦點時將其關閉，但我找不到正確的 DOM 事件來處理。
我已經嘗試了blur和focusout事件，但它們也被觸發了，甚至當子元素仍然擁有焦點。
例子：
。function openMenu() {
var menu = document.getElementById("menu"/span>)。
menu.setAttribute("open", "") 。
menu.addEventListener("focusout", handleMenuFocusOut)。
menu.focus（）。
}
function closeMenu（） {
var menu = document.getElementById("menu") 。
menu.removeAttribute("open") 。
}
function handleMenuFocusOut(/span>) {
console.log("事件被觸發！")。
menu.removeEventListener("focusout", handleMenuFocusOut)。
closeMenu()。
}span class="hljs-selector-id">#menu {
display: none;
position: fixed;
top: 50px;
padding: 20px;
background-color: 灰色。
}
#menu[open]/span> {
display: block;
}
#menu:focus, a:focus{
background-color: cyan;
}<div>
<button onclick="openMenu()"/span>> 點擊我</button>。
< div id="menu" tabindex="0">
<ul>/span>
<li>a href="#"> 鏈接1</a></li>/span>
<li>a href="#"> 鏈接2</a></li>/span>
<li><ahref="#"/span>> 鏈接3</a></li>/span>
</ul>/span>
</div>/span>
<input type="text"/span>/>
</div>/span>為了重現這一情況，點擊按鈕并按下Tab鍵在鏈接之間進行導航。 預期的行為是僅在關注外部元素（如文本框）時關閉 div。
uj5u.com熱心網友回復：
好吧，我完全改變了這個答案。
你可以使用純CSS來完成這個任務，使用focus-within和~（當open-button被聚焦時，它被用來顯示選單。
看看這個沒有使用JS的片段：
。span class="hljs-selector-id">#menu {
display: block;
position: fixed;
top: 50px;
padding: 20px;
background-color: 青色。
opacity: 0;
pointer-events: none;
}
*:focus { outline: 3px solid #ff0; }
#menu:focus-within, #open-btn: focus ~ #menu {opacity: 1; pointer-events: all; }<div>
<button id="open-tn"> 點擊我</button>。
< div id="menu" tabindex="0">
<ul>/span>
<li><a href="#"> 鏈接1</a></li>/span>
<li>a href="#"> 鏈接2</a></li>/span>
<li><ahref="#"/span>> 鏈接3</a></li>/span>
</ul>/span>
</div>/span>
<input type="text"/span> />
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/320436.html
標籤：