javascript - jquery 专注于 sibling 而不关注 parent

Question

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

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 figuring out if parent has lost 'focus')

但我想提一下我是怎么做到的。我宁愿检测我的 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>