我的键盘事件快捷方式没有触发，我不知道为什么

Question

我有一个可编辑的主要区域。 我希望用户能够创建笔记的项目符号层次结构。 用户通过按回车键创建一个新段落（这部分有效）。 但是，如果他们按下“结束”（键码 35），该段落将成为一个 li 元素，并成为其父元素的子元素。 我永远无法触发事件，我也不知道自己做错了什么。 应该能够看起来像这样：

let m=document.getElementById('textEdit'); //main area
     function mKeyClick(e){
     if (e.keyCode=="13"){ //enterKey
        e.preventDefault();
        let p=document.createElement("p");
        p.addEventListener("keypress",pKeyClick);
        m.appendChild(p);
        //...

    function pKeyClick(e){
    if (e.keyCode=="35"){ //end key
    e.preventDefault();
    let parent=e.target.parentNode;
    let li=document.createElement("li");
    parent.replaceChild(li,e.target);
    e.stopPropagation();
  }
}

应该能够看起来像这样：

• 说明
  • 更多微调细节

Answer 1

尝试不同的方法 - 而不是向子元素添加新的事件侦听器，而是使用绑定到父textEdit元素的单个处理程序处理所有事件。

我准备了一个片段来处理您的要求： https ://jsfiddle.net/cf0ju28s/

注意：因为我在 Mac 上并且没有end键，所以我使用了tab键。

let textEdit = document.getElementById('textEdit'); //main area

function mKeyClick(e) {
  if (e.keyCode == 13) { //enterKey
    e.preventDefault();

    // create paragraf
    let p = document.createElement("p");
    p.innerHTML = ' '; // add content, need to focus later
    textEdit.appendChild(p);

    // select paragraph content - enables you to write in it
    var range = document.createRange();
    var sel = window.getSelection();
    range.selectNode(p);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (e.keyCode == 9) { // tab key
    e.preventDefault();

    // find tag at caret position
    let target = window.getSelection().getRangeAt(0).commonAncestorContainer.parentNode;

    // change p tag to li tag + check that we have actual tag, not root textEdit element
    if (target != textEdit && target.innerHTML != '') {
      let li = document.createElement("li");
      li.innerHTML = target.innerHTML;
      target.parentNode.replaceChild(li, target);
    }
  }
}


textEdit.addEventListener("keydown", mKeyClick);