jquery 关注兄弟姐妹而不关注 parent

Question

我尝试通过为下一个兄弟 li 触发 focus() 事件，在 keydown 事件上遍历 ul 中的所有 li 元素。在这个过程中，我不想把注意力从parent ul 出来。但它没有发生。甚至改变对兄弟姐妹的关注也会导致 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

由于事件冒泡，focusout 事件会在您从 li 中聚焦时为您记录消息。您可以使用 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>

Answer 2

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

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>

jquery 关注兄弟姐妹而不关注 parent

jquery focus to sibling without focusing out from parent

html

javascript

css

jquery

jquery-focusout