将相同的响应附加到多个侦听器时会产生奇怪的结果

Question

我将一个submit()附加到一个按钮和输入键。在一个新的页面上，他们都会附加并回应正常运行submit()一次。只有在click事件运行后才会出现问题，然后keypress事件开始运行submit()两次而不是一次，而点击继续正常响应。

我觉得我之前已经完成了这个并解决了它（或者只是错过了）在用一些getSubmit()实现一个if()或者返回一些东西但是我觉得这应该有效。

var bindCtrlr = (function() {

    var submit = () => console.log('hi')

    document.querySelector('.add__btn').addEventListener('click', submit, false)

    document.addEventListener('keypress', function(e) {
        if (e.keyCode === 13 || e.which === 13) {
            submit()
        }
    }, false)

})()

单击submit()或按下回车键时，.add__btn应始终运行一次。

Answer 1

它两次触发的原因是因为按钮点击事件也会在输入时触发。但是，如果单击后按钮仍然在按钮上，它只会触发两次。当焦点不在按钮上时，它只会触发一次。希望这会帮助你。