Javascript "onkeyup"事件多次触发？

Question

>我有一个非常简单的代码，期望在可编辑的表格单元格 (CELL2) 中键入时每次按回车键时，控制台中都会显示"按下输入"。

console.log('working');
function enterKeyCheck(x) {
x.addEventListener('keypress', function(y) {
if (y.which == 13) {
y.preventDefault();
console.log('Enter Pressed')
};
});
};

<div id="test1">
<table>
<tr>
<td>CELL1</td>
<td contenteditable="true" onkeyup="enterKeyCheck(this)">CELL2</td>
</tr>
</table>
CHECKING
</div>

我期待每次按回车键都会收到一次"输入"消息，但看起来我每次都会收到多个消息，并且我认为该消息的记录次数与按回车键之前的字符数一样多。

1. 有人可以解释为什么会发生这种情况吗？我想我在这里发现了一个类似的问题，但我无法理解为什么即使"哪个 == 13"条件只成立一次，整个循环也会运行多次。
2. 更重要的是，我如何使用vanilla javascript来防止这种情况？

谢谢。

Answer 1

您将附加事件两次，一次在 html 中内联，另一次在enterKeyCheck函数内联。而不是this从事件处理程序传递event对象，并在函数中检查事件代码

function enterKeyCheck(y) {
if (y.which === 13) {
y.preventDefault();
console.log('Enter Pressed')
};
};

<div id="test1">
<table>
<tr>
<td>CELL1</td>
<td contenteditable="true" onkeyup="enterKeyCheck(event)">CELL2</td>
</tr>
</table>
CHECKING
</div>

Answer 2

onkeyup已经为每次按键触发enterKeyCheck，并且您的enterKeyCheck中还有另一个事件侦听器被调用，因此调用它两次。您应该只需要其中之一。

Answer 3

当您单击单元格时，onkeyup正在调用enterKeyCheck，该再次具有按键侦听器，该侦听器正在触发。 您可以将函数重写为类似的东西来解决问题。

document.querySelector('#cell').onkeyup = function (e) {
if (e.keyCode === 13) {  // enter, return
console.log('Enter pressed') //do something
}
};

向单元格添加 id 以使其可识别。

<div id="test1">
<table>
<tr>
<td>CELL1</td>
<td contenteditable="true" id="cell">CELL2</td>
</tr>
</table>
CHECKING
</div>

Answer 4

在enterKeyCheck方法中使用this会发生一些重复的事情。每次点击时，它都会触发总点击次数并为最后一次点击感到安慰。为避免这种情况，您只需要使用event而不是this。在这种情况下，代码将如下所示：

<td contenteditable="true" onkeyup="enterKeyCheck(event)">CELL2</td>

function enterKeyCheck(x) {
if (x.which == 13) {
x.preventDefault();
console.log('Enter Pressed')
};
};

如果您使用上述方式，我认为它将满足您的要求。