如何在输入字段以外的元素上触发聚焦？

Question

I'm trying to trigger a focusout event on an ul element:

// HTML
<nav>
  <ul _v-2e9e2f12="">
    <li _v-2e9e2f12="">
      <a _v-2e9e2f12="">
      </a>
      <ul _v-0078ee36="" _v-2e9e2f12="">
        <li>List element</li>
        <li>List element</li>
        <li>List element</li>
      </ul>
    </li>
  </ul>
</nav>

// JS
$(document).ready(function() {
  $("a").click(function(ev) {
    var $icon = $(ev.currentTarget)
    var $menu = $icon.next()
    $menu.focus()
    console.log('Focus triggered!')
  });

  $("ul[_v-0078ee36]").focusout(function() {
    console.log('Focusout triggered!')
  });
})

But .focusout is never triggered.

What's the correct way of doing it?

Here's the JSFiddle .

Answer 1

Elements other than input elements cannot be focused unless you give a tab index to them.

<ul tabindex="-1" _v-0078ee36="" _v-2e9e2f12="">

So if you want to trigger the focus out for a non input element, you have to set its tab index to -1 .

DEMO