查找未知的活动事件侦听器 Javascript答案

【问题标题】：Find unknown active event listeners Javascript查找未知的活动事件侦听器 Javascript
【发布时间】：2019-03-10 00:44:39
【问题描述】：

我想寻找未知的事件监听器

到目前为止，我尝试根据This post 定位所有事件侦听器，但没有成功：

getEventListeners(Element);

和

'Chrome Developer tools > Elements > Event listeners'

还有其他方法可以检测活动的事件侦听器吗？

问这个的原因是：

我正在根据 Mozilla 的教程使用纯 JavaScript 构建 2D breakout game，并设法通过各种功能和多个级别对其进行增强。

我有一组添加的事件监听器和一个删除它们的函数，到目前为止一切正常。

我没有键码 13（即回车键）的事件监听器

问题是，如果我在画布上进行动画时按下 Enter 键，它会随着每次按键后球的速度增加而改变行为，并最终呈现不同的绘图。

如果我不按 Enter 键，一切都会按预期进行。

唯一能提高速度的事件监听器是“点击”事件，但在函数执行后会立即删除，不会干扰游戏。

另一个问题是通过上述方法没有找到事件监听器，即使是我自己添加的也没有，尽管它们仍然有效。

我找不到与这种不良行为相关的任何内容，我想问一下是否有其他方法可以查看活动的事件侦听器。

Here 是我正在处理的代码

[编辑： 在意识到错误来自keydown 事件后，添加preventDefault() 解决了问题。

但是，我不确定为什么在没有 e.keyCode == 13 设置的情况下会发生这种行为，以及为什么 preventDefault() 方法解决了这个问题。 ]

【问题讨论】：

我能问一下为什么getEventListeners 还不够吗？为什么需要另一种方式？加速是否发生在任何键上，或者只是输入？鉴于您在 keyCode === 13 上没有监听器，这确实很奇怪。
@DavidsKanal，当我尝试在document 或canvas 上使用getEventListeners 时，它会返回一个对象树，我在其中找不到任何事件侦听器。只有当我按下 Enter 键时才会加速。

标签： javascript event-handling dom-events passive-event-listeners

【解决方案1】：

我的猜测是 click 事件将焦点放在 giraffe 上，允许使用 enter 键触发它。你可以试试 mousedown 和 preventDefault 让长颈鹿无法集中注意力：

giraffe.addEventListener('mousedown', function(e){
 e.preventDefault();
 giraffe.classList.remove('pulsate');
        setTimeout(function(){
            giraffe.classList.add('pulsate');
        }, 0);
        yahoo.play();
});

【讨论】：

感谢您的意见。我试过了，但不幸的是，它没有用。我什至尝试删除整个函数以查看是否有任何影响，但错误仍然存在。

【解决方案2】：

错误似乎在于keydown 事件处理程序（keyDownHandler）。这就是导致意外行为的原因。

将e.preventDefault();添加到keyDownHandler函数后，该bug消失了。

原文：

function keyDownHandler(e) { //on key down
e.keyCode == 37 ? leftPressed = true : null;
e.keyCode == 39 ? rightPressed = true : null;

}

之后：

function keyDownHandler(e) { //on key down
e.preventDefault();
e.keyCode == 37 ? leftPressed = true : null;
e.keyCode == 39 ? rightPressed = true : null;

最终结果：按下 Enter 键时没有任何反应

感谢 @Joe Fitzsimmons 为我指明了正确的方向

【讨论】：