输入，尖叫...我的意思是，它流-DEV365 开发者社区

您是否曾经想过像以下内容那样写一个事件听众？

const button = document.querySelector('button');

button.addEventListener(
    'click',
    () => {
        console.log('click');
    }
);

然后，收到报告说您列出的实际工作（请不要将console.log()语句运送到生产）经常发生？

也许您像这样写了听众，并收到了类似的报告？

const button = document.querySelector('button');

button.addEventListener(
    'keydown',
    ({ code }) => {
        if (code === 'Enter') {
            console.log('Enter'));
        }
    }
);

如果您已经遇到了上下文，请不要毁了惊喜...

基于键盘的交互

要模拟指针交互在使用键盘导航应用程序时，按下Space键并焦点焦点时，该交互中的keyup事件将重复为click事件。同样，在Enter键上的keydown event（或keypress事件，如果您喜欢弃用的API），则在同一情况下，将重复为click事件。

但是，Enter键很特别。 Enter键尖叫...我的意思是，播放了其keydown事件。这意味着，只要访问者将其Enter键放在keydown事件下，通常会紧密耦合到钥匙下降时，它将继续开火。这意味着我们的keydown侦听器和上述代码示例中的click侦听器也将流式传输。

我自己的鬼屋

我最近对这个现实感到惊讶时，当我绑定的听众将重点投入了一个不同的元素，该元素也带有像这样的听众，随后通过焦点重新回到了第一个元素并创建了一个循环ð ±

const button1 = document.querySelector('button.one');
const button2 = document.querySelector('button.two');

button1.addEventListener(
    'click',
    () => {
        button2.focus();
    }
);

button2.addEventListener(
    'click',
    () => {
        button1.focus();
    }
);

通常，活动听众的工作完全按计划进行，但随后在夜晚出现了……幸运的是，我有很棒向用户上线。 ð

输入您自担风险

也许在您的访问者中大喊大叫的听众是正确的选择，但是，如果不是，请牢记这一现实以确保您的应用程序提供预期的体验。

如果您有兴趣将与Enter键的互动汇合到一次性活动，则可能对keyup事件感兴趣：

const button = document.querySelector('button');

button.addEventListener(
    'keyup',
    ({ code }) => {
        if (code === 'Enter') {
            console.log('Enter'));
        }
    }
);

如果您实际上正在使用click事件，则可能需要做更复杂的门控：

let enterKeydown = false;

const button = document.querySelector('button');

button.addEventListener(
    'keydown',
    ({ code, preventDefault }) => {
        if (code === 'Enter') {
            if (enterKeydown) {
                preventDefault();
            }
            enterKeydown = true;
        }
    }
);

button.addEventListener(
    'keyup',
    ({ code, preventDefault }) => {
        if (code === 'Enter') {
            enterKeydown = false;
        }
    }
);

button.addEventListener(
    'click',
    () => {
        console.log('click');
    }
);

或者，也许您还有另一种方法可以不吓访问您的访客？如果是这样，请在下面的评论中分享！我很想听听您一直在做什么，以防止Enter键向任何必须听您的应用程序的人尖叫。