将div与元素放在一起时的焦点/模糊
将div与元素放在一起时的焦点/模糊
提问于 2021-09-07 02:13:59
有一个固定的div，有一些链接，当用户单击按钮时显示。为了便于访问，我想在这个div失去键盘焦点时关闭它，但是我找不到要处理的正确的DOM事件。
我尝试过blur和focusout事件，但即使在子元素仍然具有焦点时也会触发它们。
示例：
function openMenu() {
var menu = document.getElementById("menu");
menu.setAttribute("open", "");
menu.addEventListener("focusout", handleMenuFocusOut);
menu.focus();
}
function closeMenu() {
var menu = document.getElementById("menu");
menu.removeAttribute("open");
}
function handleMenuFocusOut() {
console.log("Event triggered!");
menu.removeEventListener("focusout", handleMenuFocusOut);
closeMenu();
}#menu {
display: none;
position: fixed;
top: 50px;
padding: 20px;
background-color: gray;
}
#menu[open] {
display: block;
}
#menu:focus, a:focus {
background-color: cyan;
}<div>
<button onclick="openMenu()">Click Me</button>
<div id="menu" tabindex="0">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<input type="text"/>
</div>
若要再现该案例，请单击该按钮并按下选项卡以在链接之间导航。预期的行为是只在聚焦外部元素(如textbox )时关闭div。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-09-07 02:29:34
好吧，我完全改变了这个答案。
您可以使用纯CSS使用focus-within和~ (在打开按钮聚焦时用来显示菜单)。
看一下这个片段，它不使用JS:
#menu {
display: block;
position: fixed;
top: 50px;
padding: 20px;
background-color: cyan;
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-btn">Click Me</button>
<div id="menu" tabindex="0">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<input type="text" />
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69086330
复制
相似问题
为什么‘a’标签需要`tabindex=0`？
如何在tabIndex = '0‘中添加TypeScript div？
为什么IE7要在没有表索引的元素中添加tabindex="0“？
动态添加tabindex
<a> click="“在tabindex='0‘时不起作用
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
