我试图像每个普通元素一样基于点击来触发绝对定位元素上的焦点和模糊事件，因此当下拉菜单失去焦点时，它会自行折叠，但是，它不会以任何方式做出反应。当我手动完成时
event=new Event('blur/focus') //any of the two
absoluteDiv.dispatchEvent(event)
它有效。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#absoluteDiv{
background-color:black;
position:absolute;
top:0px;
right:0px;
z-index:10;
pointer-events:all;
color: white;
}
</style>
<script src='divProblem.js' defer></script>
</head>
<body>
<div>I'm just a regular div</div>
<div id='absoluteDiv'>I'm an absolute div</div>
</body>
</html>
Javascript：
div=document.getElementById('absoluteDiv')
div.addEventListener('blur', (e)=>{
console.log('I was blurred')
})
div.addEventListener('focus', (e)=>{
console.log('I was focused')
})
我确信虽然不理想，但我可以做一些解决方法，向整个主体添加单击事件侦听器，但即使在这种情况下，我至少很好奇为什么绝对元素会以这种方式工作。为什么点击不会触发焦点和模糊事件？即使有 CSS 属性
pointer-events:all非交互式元素默认情况下不可聚焦，这就是您的 div 不发出这些事件的原因。您可以通过添加 tabindex 属性使其可聚焦：
<div tabindex="0">...</div>
该值用于确定使用 Tab 键循环浏览可聚焦元素时何时应该获得焦点。