如何让点击触发绝对定位元素的blur与focus事件？

这和绝对定位完全没关系——普通div元素默认不具备可聚焦性，不管你用不用position:absolute，点击它都不会自动触发focus或blur事件。只有本身支持聚焦的元素（比如input、button、a标签），或者手动设置了tabindex属性的元素，才能通过点击或Tab键获得焦点，进而触发这两个事件。

你手动调用dispatchEvent能触发监听，是因为事件绑定本身是有效的，但浏览器不会主动给不可聚焦的元素派发focus/blur事件。

解决方法 #

给你的绝对定位div添加tabindex属性即可：

<div id='absoluteDiv' tabindex="0">I'm an absolute div</div>

• tabindex="0"：元素会纳入正常的Tab键导航顺序，点击或按Tab都能聚焦
• tabindex="-1"：元素可以通过JS调用focus()方法聚焦，但不会出现在Tab导航里，适合不需要键盘交互的场景

修改后再点击这个div，就能正常触发focus事件，点击页面其他区域时也会触发blur事件，完全满足下拉菜单失焦收起的需求。

验证示例 #

你可以试试给页面里的普通div也加tabindex：

<div tabindex="0">I'm just a regular div</div>

点击它同样会触发focus/blur，这就说明问题根源是元素的可聚焦性，和定位方式无关。

内容的提问来源于stack exchange，提问作者Matheus Moraes