jquery 关注兄弟姐妹而不关注父母答案

【问题标题】：jquery focus to sibling without focusing out from parentjquery 关注兄弟姐妹而不关注父母
【发布时间】：2017-05-31 03:42:29
【问题描述】：

我尝试通过为下一个兄弟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>

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

【问题讨论】：

Can multiple HTML elements receive focus at the same time?的可能重复
@A.Lau 不知道。为什么人们在没有正确阅读的情况下标记重复。绝对不是重复的。我不是在问定义。如果焦点事件在此处不起作用，则需要在此处解决问题的其他事件建议。
我想知道您为什么要检测 ul 之外的焦点。为什么不在 ul 之外的任何地方使用 click 事件
@KiranDash 这是唯一的解决方案吗？可以做到，但我认为如果有focusout、focus、focusin、blur，那么它们可以以某种方式使用。我的意思是要求元素做出反应，而不是要求其他人对那个元素做出反应。
I am try to iterate through all li elements in ul on keydown event by firing focus() 好吧，我的“复制”几乎可以勾勒出您无法做到的轮廓。您一次只能专注于。

标签： javascript jquery html css jquery-focusout

【解决方案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>

【讨论】：

谢谢。它似乎在 sn-ps 中工作。会检查的。
我之前没想到。这种方法的问题是我想做一些动作，比如在聚焦于 ul 时删除一些元素。现在，如果您将此责任赋予在元素外部单击，那么我怎么知道此单击是在 ul 外部的第一次单击。我的意思是点击外部会非常频繁，这并不意味着总是专注于 ul。

【解决方案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>

【讨论】：