Question

我试图在我的JavaScript文件上添加一个事件侦听器以将其链接到我的HTML，但是它无法识别它。我做错什么了吗，因为它们在单独的文本文档中。但是，它可以与其他部分配合使用，因此我认为这可能是我尚未发现的小错误。

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<head>
<title>Outliner</title>
<link href="style.css" rel="stylesheet" title="Style">
<script type= "text/javascript" src='setting.js'></script>
<div>
  <input type="button" onclick="reset();" value="Reset form">
  <button id="pr" onclick="reset()"> Clear </button>
  <div id="ul" class="editor" contenteditable="true" draggable="true" ></div>
  </div>
</head>
</body>

const TAB_KEY = 9;
const ENTER_KEY = 13;

let editor = document.querySelector('.editor');

editor.appendChild(document.createElement('li')); // Add initial (for visibility)

window.editor.addEventListener('focus', (e) => {
  //let ul = e.target;
  //let li = document.createElement('li');
 //ul.appendChild(li);
});

window.editor.addEventListener('keydown', (e) => {
  let code = e.keyCode || e.which;
  if (code == TAB_KEY) {
    e.preventDefault(); 
    let parent = e.target;
    let ul = document.createElement('ul');
    let li = document.createElement('li');
    ul.appendChild(li);
    parent.appendChild(ul);
    moveCursorToEnd(li);
    } else if (code == ENTER_KEY) {
    e.preventDefault(); // Stop treating it like an actual line feed
    let parent = e.target;
    let li = document.createElement('li');
    parent.appendChild(li);
    moveCursorToEnd(li);
  }
});

function moveCursorToEnd(el) {

  el.focus();

  document.execCommand('selectAll', false, null);

  document.getSelection().collapseToEnd();
}

Answer 1

我注释掉了您的所有主要代码，并在事件侦听器中放置了word2vec_format以了解发生了什么。事实证明，它发送错误alert是因为它不喜欢cannot use property addEventListener of undefined。

解决方案是仅将window.editor替换为window.editor。尝试在下面的代码段中输入editor div，以查看当您使用contenteditable时它如何工作。这可能是因为您用editor而不是editor声明了let变量，这以不同的方式影响了变量的范围，因此它不会成为{{1 }}对象。

var

window

HTML无法识别eventListeners

1 个答案: