Question

我尝试通过针对下一个兄弟li触发ul事件来遍历keydown事件focus()中的所有li元素。在这个过程中，我不想从父ul开始关注。但它没有发生。即使改变对兄弟姐妹的关注也会引起父母的聚焦事件。我想要的只有当有人点击屏幕上的其他地方时才应该关注父母被解雇。

＆＃13;

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')
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

由于事件冒泡，当您从li聚焦时，焦点输出事件正在为您记录消息。您可以使用event数据来检查您所关注的位置。（在此处阅读更多内容：jQuery figuring out if parent has lost 'focus'）

但我想提一下我是怎么做到的。我想在ul之外检测点击。

＆＃13;

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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我发现的唯一方法是在我尝试聚焦任何li

时禁用父ul的聚焦事件

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

jquery专注于兄弟姐妹而不关注父母

2 个答案: