Событие Mousedown не работает с tabindex focus ()

Question

Я хочу установить фокус на указанном c элементе div, используя событие mousedown. Затем я нажимаю клавишу табуляции, чтобы проверить, фокусируется ли следующий элемент после моего указанного c элемента. Но после нажатия клавиши tab активным элементом является предыдущий элемент, а не тот, что указан после моего указанного элемента c div.

Так что код не работает для события mousedown. Это работает, когда мое событие keypress, но не с mousedown. Вы знаете, как это исправить?

$('.name').on('mousedown', function (e) {
    $(".nameSec").attr("tabindex", 0).focus();                                                       
})

Answer 1

Событие при нажатии мыши фактически захватывает фокус на целевой элемент, даже если он не получает никакого фокуса, поэтому вызов focus, пока кнопка мыши еще нажата, не будет иметь никакого эффекта. Вы можете делать то, что хотите, используя событие mouseup.

Запустите приведенный ниже фрагмент и нажмите cyan div

$('.name').on('mouseup', function (e) {
  $(".nameSec li[tabindex='1']").focus();                                                       
})

.nameSec {
  list-style: none;
  padding: 0;
}

.nameSec li {
  padding: 10px;
  background-color: lightyellow;
  margin-bottom: 10px;

}

.nameSec li:focus {
  outline: 1px dashed grey;
  outline-offset: -2px;
}

.name {
  padding: 20px;
  background-color: lightcyan;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<ul class="nameSec">
  <li tabindex="0">Tab 1</li>
  <li tabindex="1">Tab 2</li>
  <li tabindex="2">Tab 3</li>
</ul>

<div class="name">
Click me to set focus to <strong>Tab 2</strong>
</div>