JQuery сосредоточиться на родном брате, не обращая внимания от родителя

Question

Я пытаюсь перебрать все li элементы в ul на keydown событие, стреляя focus() событие для следующего брата li, В этом процессе я не хочу фокусироваться на родителях ul, Но этого не происходит. Даже изменение фокуса на братьях и сестрах вызывает событие focusout для родителя. Я хочу, чтобы только когда кто-то щелкает где-то еще на экране, фокус должен быть уволен из родительского.

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 для родительского 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>

Answer 2

Из-за всплытия событий событие focusout регистрирует сообщение для вас, когда вы фокусируете из li тоже. Вы можете использовать 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>