Javascript 我的键盘事件快捷键不是'；t开火，我不'；我不知道为什么

我有一个可编辑的主区域。我希望用户能够创建注释的要点层次结构。用户通过按enter键创建新段落（此部分有效）。但是，如果按“结束”（键代码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();
  }
}

应该能够如下所示：

• 描述
  • 更精细的细节

---

尝试不同的方法-不要向子元素添加新的事件侦听器，而是使用绑定到父元素

textEdit

元素的单个处理程序来处理所有事件

我准备了一个片段来处理您的需求：

注意：因为我在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);

---

您是否附加了监听事件的功能？是的，我已添加了适用的代码，请立即尝试按键，而不是按键。由于我的段落在我的主要内容中，因此未发生任何更改。是否有可能主键控事件覆盖了我的段落键控事件？