javascript - 从事件监听器获取嵌套的 li 'keyup'

Question

我有一个可编辑的嵌套 li。当该 li 上发生“keyup”事件时，如何获取特定的 li。请不要使用 jQuery。

我尝试将事件监听器“keyup”放在所有 li 上，但 e.target 给出的是最外层的 li (li#1) 而不是 (li#4)。当我用“点击”事件进行测试时，它给出了精确的 li(li#4) 按键。

var numberList = document.querySelector("#numberList");
numberList.addEventListener('keyup', handler)

function handler(e){
  if(e.type === 'keyup'){
        getId(e)
    }
}

<ul id = "numberList">
<li id="1">
    one
    <ul>
        <li id="2">
            two
            <ul>
              <li id="4">four</li>
            </ul>
        </li>
        <li id="3">three</li>
    </ul>
<li id = "5">
    Five
    <ul>
        <li id="6">six</li>
    </ul>
   </li>

如果我编辑值为“4”的 li，我应该得到 id ="4"而不是 id="1"的 li

Answer 1

<li>不是键盘可聚焦元素。它不会注册按键事件，例如 HTML 表单输入、按钮、 anchor 或其他交互类型。

一个可能的解决方案是在列表项中添加一个按钮，让它们接收事件，然后向上遍历以选择其父(列表项)ID。

<li id="1">
    <button>one</button>
    <ul>
        <li id="2">
            <button>two</button>
            <ul>
              <li id="4"><button>four</button></li>
            </ul>
        </li>
        <li id="3"><button>three</button></li>
    </ul>
</li>