jquery专注于兄弟姐妹，而不是从父级关注

Question

我尝试通过为下一个兄弟li触发focus()事件来迭代keydown事件ul中的所有li元素。在这个过程中，我不想把注意力从父母ul上移开。 但它没有发生。即使改变对兄弟姐妹的关注也会导致父母的焦点事件。我希望只有当有人点击屏幕上的其他地方时，才应该将焦点从父母身上移开。

var KEY_DOWN=40;
$(document).on('keydown', 'li', function(e){
	let keyCode = e.keyCode || e.which;
	if(keyCode == KEY_DOWN)
	{
		if($(this).next().length != 0)
		{
			$(this).next().focus();
		}
		else
		{
			$(this).parent().children().first().focus();
		}
		return false;
	}
});
$(document).on('focusout','ul', function(e)
{
	console.log('focused')
});

li
{
border: 1px solid black;
}
li:focus
{
background: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul tabindex="-1">
<li tabindex="-1">First</li>
<li tabindex="-1">Second</li>
<li tabindex="-1">Third</li>
</ul>

在片段中，专注于每次按下向下键时打印。如何解决这种情况。

Answer 1

由于事件冒泡，当您的焦点不在li时，focusout 事件也会为您记录消息。您可以使用event数据从您关注的位置进行检查。(在这里阅读更多：jQuery找出父级是否失去了"焦点")

但我想提一下我是如何做到的。我宁愿检测ul之外的点击。

var KEY_DOWN=40;
$(document).on('keydown', 'li', function(e){
	let keyCode = e.keyCode || e.which;
	if(keyCode == KEY_DOWN)
	{
		if($(this).next().length != 0)
		{
			$(this).next().focus();
		}
		else
		{
			$(this).parent().children().first().focus();
		}
		return false;
	}
});
$(document).on('focusout','ul', function(e)
{
console.log('focused out of li');
});
$(document).click(function() {
console.log('focused out of ul');
});
$('ul').click(function(e) {
e.stopPropagation();
});

li
{
border: 1px solid black;
}
li:focus
{
background: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul tabindex="-1">
<li tabindex="-1">First</li>
<li tabindex="-1">Second</li>
<li tabindex="-1">Third</li>
</ul>

Answer 2

我发现的唯一方法是在我尝试聚焦任何 li 时禁用父 ul 上的聚焦事件

var KEY_DOWN=40;
$(document).on('keydown', 'li', function(e){
	let keyCode = e.keyCode || e.which;
	if(keyCode == KEY_DOWN)
	{
$(document).off('blur','ul', doWork);
		if($(this).next().length != 0)
		{
			$(this).next().focus();
		}
		else
		{
			$(this).parent().children().first().focus();
		}
$(document).on('blur','ul', doWork);
		return false;
	}
});
doWork = function(e)
{
	console.log('focused')
};
$(document).on('blur','ul', doWork);

li
{
border: 1px solid black;
}
li:focus
{
background: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul tabindex="-1">
<li tabindex="-1">First</li>
<li tabindex="-1">Second</li>
<li tabindex="-1">Third</li>
</ul>