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>

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

Answer 1

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

一种可能的解决方案是在列表项中添加一个按钮，让它们接收事件，然后向上移动以选择其父级（列表项）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>

Answer 2

您的评论引起了我的注意...

创建li时，我会添加li.contentEditable =“ true”;

因此，如果我理解正确，则说明您正在使用JavaScript生成DOM元素。在这种情况下，当您同时生成contentEditable li时，可以为其专门分配事件监听器。

'use strict';

let ul1 = document.createElement('ul');
    ul1.id = 'numberList';

let li1 = document.createElement('li');
    li1.innerHTML = 'one';
    li1.id = 'li1';

let ul2 = document.createElement('ul');
    ul2.id = 'ul2';

let li2 = document.createElement('li');
    li2.innerHTML = 'two';
    li2.id = 'li2';

let ul3 = document.createElement('ul');
    ul3.id = 'ul3';

let li3 = document.createElement('li');
    li3.innerHTML = 'four';
    li3.id = 'li3';
    li3.contentEditable = true;
    li3.addEventListener('keyup', handler);

function handler(e){
  if(e.type === 'keyup'){
        console.log( this.id );
    }
}

ul3.appendChild( li3 );
li2.appendChild( ul3 );
ul2.appendChild( li2 );
li1.appendChild( ul2 );
ul1.appendChild( li1 );
document.body.appendChild( ul1 );

从事件侦听器“ keyup”获取嵌套的li

2 个答案: