javascript - 如何让 [Enter] 只运行一个处理程序？

Question

我正在通过 Head First HTML5 学习。他们在书中有一个关于如何用 JavaScript 创建非常基本的播放列表的教程。单击按钮，输入的文本将添加到列表中。我想，“我宁愿直接按回车键。”因此，我尝试更进一步，让按键运行适当的功能。

似乎 [Enter] 键将新文本添加到列表中，但随后刷新页面和整个列表，删除任何输入的文本!我检查了其他键是否发生了同样的事情，它们都工作正常，所以这只是 [Enter] 键发生的事情。

window.onload = init;

function feedTheList() {
    var textInput, songName, li, ul;

    textInput = document.getElementById("songTextInput");
    songName = textInput.value;
    li = document.createElement("li");
    li.innerHTML = songName;
    if (!songName) {
        alert("There is no new song name.")
    }
    else {
        ul = document.getElementById("playlist");
        ul.appendChild(li);
    }
}

function init() {
    var button, textBox;

    window.addEventListener('keypress', function (e) {
        if (e.keyCode === 13) {
            feedTheList();
        }
    });

    button = document.getElementById("addButton");
    button.onclick = feedTheList;
}

为什么[Enter]键刷新页面？如何防止它刷新页面？

Answer 1

由于您使用的是表单字段(输入或文本区域)，因此 [enter] 键被映射为“提交”表单。你需要 prevent the default action behavior使用 event.preventDefault():

window.addEventListener('keypress', function (e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        feedTheList();
    }
});