下面是所有的 HTML 和 javascript 的相关部分。javascript 片段是从顶部开始的所有内容，然后我只显示了两个“keydown”事件，否则会有很多内容需要阅读。这两个事件被标记为“第 1 节”和“第 2 节”。
我有几个不同的“keydown”事件，它们添加了各种不同的 HTML 内容。这个网页几乎完全是用 javascript 设计的，只是作为一个演示。
每次用户按下相关键时，我都希望将内容添加到 HTML 文档中。目前，只需重复按同一个键，就可以无限次添加相同的内容。这不是我想要的。
如何使事件只能进行一次？
/* ////////// INTIAL TITLE ////////// */
var initialTitle = document.createElement("h1");
var intialTitleContent = document.createTextNode("Please press the \"1\" key on your keyboard.");
initialTitle.appendChild(intialTitleContent);
document.body.appendChild(initialTitle);
/* ////////// KEYPRESS FUNCTIONS ////////// */
window.addEventListener("keydown", checkKeyPress, false);
function checkKeyPress(key) {
// SECTION 1 - Paragraph explaining what this page is about and what to do.
if (key.keyCode == "49") // "1"
{
var pElement = document.createElement("p");
var content = document.createTextNode("Welcome! This page is made entirely out of javascript. It is completely impractical to create a webpage in this manner. This page is simply a demonstration of how javascript can be used to create and add HTML element and CSS to a HTML document. Meaning within the HTML document the <body> element only contains a link to the javascript code and what the javascript code has added. You can add content by pressing the \"1\" through to \"9\" keys. Each piece of content can then be styled by pressing the \"s\" key.");
pElement.appendChild(content);
document.body.appendChild(pElement);
}
// SECTION 2 - TABLE
else if (key.keyCode == "50") // "2"
{
var tableDiv = document.createElement("div");
var tableElement = document.createElement("table");
tableDiv.classList.add("div_1");
for (var z = 1; z <= 4; z++) { //Creating "tr" elements.
var trElement = document.createElement("tr");
tableElement.appendChild(trElement);
for (var i = 1; i <= 4; i++) { //Creating "td" elements within the "tr" elements.
var tdElement = document.createElement("td");
tdElement.classList.add("tableCell");
trElement.appendChild(tdElement);
}
}
tableDiv.appendChild(tableElement);
document.body.appendChild(tableDiv);
/* Table styling below this point */
var tableCellStyling = document.getElementsByClassName("tableCell");
for (var y = 0; y < tableCellStyling.length; y++) {
tableCellStyling[y].style.width = "80px";
tableCellStyling[y].style.height = "80px";
tableCellStyling[y].style.border = "2px solid #303030";
}
}<!doctype html>
<html lang="en-gb">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, intial-scale= 1.0"/>
<title>Javascript Only Site</title>
</head>
<body>
<script src="js/JOS.js"></script>
</body>
</html>如果您希望一个事件只被触发一次，您可以removeEventListener在该事件的回调中。您将需要一个包含对处理程序的引用的变量来执行此操作，因此它看起来像：
var eventHandler = function(event){
//do things
document.removeEventListener('keypress', eventHandler);
}
document.addEventListener('keypress', eventHandler);但是看看你的代码片段，如果你只想触发每个键码行为一次，你可以创建一个映射来跟踪之前按下了哪些键然后短返回。
var pressedKeys = {};
/* ////////// INTIAL TITLE ////////// */
var initialTitle = document.createElement("h1");
var intialTitleContent = document.createTextNode("Please press the \"1\" key on your keyboard.");
initialTitle.appendChild(intialTitleContent);
document.body.appendChild(initialTitle);
/* ////////// KEYPRESS FUNCTIONS ////////// */
window.addEventListener("keydown", checkKeyPress, false);
function checkKeyPress(key) {
/** ADDED CODE **/
if(pressedKeys[key.keyCode] !== undefined){//return if we've seen this key before
return;
}
pressedKeys[key.keyCode] = 1;//just assign a value
/** END ADDED CODE **/
// SECTION 1 - Paragraph explaining what this page is about and what to do.
if (key.keyCode == "49") // "1"
{
var pElement = document.createElement("p");
var content = document.createTextNode("Welcome! This page is made entirely out of javascript. It is completely impractical to create a webpage in this manner. This page is simply a demonstration of how javascript can be used to create and add HTML element and CSS to a HTML document. Meaning within the HTML document the <body> element only contains a link to the javascript code and what the javascript code has added. You can add content by pressing the \"1\" through to \"9\" keys. Each piece of content can then be styled by pressing the \"s\" key.");
pElement.appendChild(content);
document.body.appendChild(pElement);
}
// SECTION 2 - TABLE
else if (key.keyCode == "50") // "2"
{
var tableDiv = document.createElement("div");
var tableElement = document.createElement("table");
tableDiv.classList.add("div_1");
for (var z = 1; z <= 4; z++) { //Creating "tr" elements.
var trElement = document.createElement("tr");
tableElement.appendChild(trElement);
for (var i = 1; i <= 4; i++) { //Creating "td" elements within the "tr" elements.
var tdElement = document.createElement("td");
tdElement.classList.add("tableCell");
trElement.appendChild(tdElement);
}
}
tableDiv.appendChild(tableElement);
document.body.appendChild(tableDiv);
/* Table styling below this point */
var tableCellStyling = document.getElementsByClassName("tableCell");
for (var y = 0; y < tableCellStyling.length; y++) {
tableCellStyling[y].style.width = "80px";
tableCellStyling[y].style.height = "80px";
tableCellStyling[y].style.border = "2px solid #303030";
}
}