为什么不起作用?
正如埃帕斯卡雷罗在评论中指出的那样,
blur
在下一个元素有焦点之前发生。
为什么
setTimeout()
,即使使用
0ms
耽搁,工作?
我
相信
这与渲染引擎有关。当你做一个
设置TimeTo()
,函数将被“排队”
后面
渲染引擎的ui更新(它关注下一个元素)。尽管在
时间
, the
设置TimeTo()
确保进行检查
之后
用户界面更新。
事件顺序:
1. Fire blur event
2. Update UI
事件顺序
设置TimeTo()
:
1. Fire blur event (queue new function) âââ
2. Update UI |
3. Run the queued function <ââââââââââââ
有别的选择吗?
这个
模糊
事件的
relatedTarget
指示将接收焦点的元素。
通过知道将要接收焦点的元素,可以使用jquery的
.filter()
以确定它是否是导航项目。
var $nav = $(".navigation nav.main"),
$navItems = $nav.find("a");
$navItems.on("blur", function(e) {
var $focusedElement = $(e.relatedTarget);
var isNavItem = !!$navItems.filter($focusedElement).length;
if (!isNavItem)
console.log("The focused element is not a nav item.");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<nav class="main">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</nav>
</div>
<a href="#">Non-nav link</a>