[英]Why does the JQuery “blur” event listener not work as expected?
I have a mobile nav - I'm trying to write something that will take you straight to the "close" button, so that the user can close the mobile nav. 我有一个移动导航-我正在尝试编写一些内容,使您直接进入“关闭”按钮,以便用户可以关闭移动导航。 I'm trying to trigger this when the last item in the menu loses focus.
当菜单中的最后一个项目失去焦点时,我试图触发此操作。 (when using your keyboard to tab through the menu)
(使用键盘在菜单上切换时)
However, what is happening right now - as soon as that last item receives focus, it jumps straight to the close button. 但是,当前正在发生的情况-最后一项获得焦点后,它会直接跳至关闭按钮。 So you don't even get a chance to click the link.
因此,您甚至没有机会单击链接。
I'd expect "blur" to occur when you LEAVE the element, not focus on it... 我希望当您离开元素而不是专注于元素时会发生“模糊” ...
Why is this happening? 为什么会这样呢?
$('.closeNav + ul a[href="#lastLink"]').blur(function() {
$('.closeNav').focus();
});
<nav class="mobile fullScreen active" tabindex="0">
<div class="in">
<div class="closeNav" tabindex="0" aria-label="Close Navigation selectable">
<img src="#">
</div>
<ul>
<li class="first"><a href="#" class="">link</a>
<ul>
<li class="first"><a href="#">link</a></li>
<li><a href="#" >link</a></li>
<li><a href="#" >link</a></li>
<li><a href="#" >link</a></li>
<li><a href="#" >link</a></li>
<li><a href="#" >link</a></li>
<li><a href="#" >link</a></li>
<li><a href="#" >link</a></li>
<li><a href="#" >link</a></li>
<li class="last"><a href="#" >link</a></li>
</ul>
</li>
<li><a href="#">link</a>
<ul>
<li class="first"><a href="#">link</a></li>
</ul>
</li>
<li><a href="#" >link</a></li>
<li class="last"><a href="#" class="">link</a>
<ul>
<li class="first"><a href="#lastLink">Last link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
To accomplish this you need to use the Next Siblings selector $("prev ~ siblings")
Selects all sibling elements that follow after the "prev" element, have the same parent, and match the filtering "siblings" selector. 为此,您需要使用“ 下一个兄弟姐妹”选择器
$("prev ~ siblings")
选择在“ prev”元素之后的所有兄弟姐妹元素,具有相同的父元素,并与过滤的“ siblings”选择器匹配。
$('.closeNav ~ ul a[href="#lastLink"]').blur(function() {
$('.closeNav').focus();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.