有没有办法动态暂停元素的所有eventListeners？

Question

我正在逐步填写类似于表单的页面（希望它在语法上是正确的☺）。

这里的主要想法很简单：第一步没有完成，第二步不可用。
我需要它真正不可用，而不仅仅是CSS隐藏（如opacity: 0;或visibility: hidden;）。

所以，这是一个问题：在JavaScript中是否有任何方法可以动态暂停（以及稍后取消暂停）某些元素的所有eventListener？

P.S。：事件是例如onwheel || onmousewheel。

这是图片（抱歉为西里尔文）：
（这是关于记分表输入。）

您在此处看到<input type="range">元素。鼠标滚动将改变它的值。

表单的第一步尚未完成;所以第二个必须不可用，并且input range元素上的鼠标滚动不起作用 但是这次我用opacity: .3;设法了 所以一切正常，但画面有点半透明，就是这样 这很糟糕。
它根本不应该对鼠标滚轮作出反应（只是通常的页面滚动） 并且不透明度必须为满（opacity: 1;） 所以，我们回到最初的问题。

Answer 1

JavaScript中没有办法甚至列出元素的所有事件监听器，所以要阻止它们是一个更高的命令。

简而言之，您的问题的答案是：暂停所有事件监听器没有一般方法。

但是，您可以尝试一些有助于实现目标的事情。

计划A - HTML / CSS +一点点JS：如果你的意图只是为了防止事件到达未激活的步骤，你可以试试黑客攻击：创建一个透明的“阻止”元素完全相同的尺寸。当你“禁用”你的步骤时，“启用”阻挡器就在它上面 - 可能使用绝对定位，例如

// Disable step 2
step2.style.opacity = '0.3'; // could also be a CSS class toggle, or an JS animation
step2_blocker.style.display = 'block'; // make your blocker show up on top of step2

如果您知道位置/尺寸，则可以使用HTML + CSS创建阻止程序。如果没有，您可以在计算step2的位置/尺寸后使用JS在运行时创建阻止程序。

计划B - 仅限JS：如果由于某种原因，您无法更改HTML或CSS，并且您需要一个不会改变DOM的JS解决方案，或者您是真的试图解决“我如何暂停事件监听器？”的一般问题，那么你可能只有一个解决方案 - 跟踪你的听众。从本质上讲，您将构建自己的事件绑定/跟踪库。 API由on()，off()，pause()，resume()组成。

• on(HTMLElement, eventType, callback)：你应该将监听器回调推送到一个注册表 - 一个监听器对象数组，其中监听器对象包含HTMLElement及其相应的eventType和事件监听器回调。
• off(HTMLElement, eventType, callback)：从注册表中删除侦听器对象。
• pause(HTMLElement, eventType, callback)：从注册表中找到侦听器对象并将其设置为暂停状态，即停止实际侦听器。
• resume(HTMLElement, eventType, callback)：从注册表中找到侦听器对象，并将该元素重新绑定到事件侦听器。

当然，可以使API灵活/智能足以接受不同数量的参数（模拟函数重载），以便pause(elem)可以暂停元素上的所有事件，pause(elem, 'click')可以暂停该元素上的所有点击事件。

然后，不要在代码中使用addEventListener()，而是始终记住在您创建的库中使用on()。您可能必须重构所有事件绑定和侦听器代码。

这个计划稍微复杂一点，但可能是跟踪事件监听器的唯一方法。我以前做过这个，所以我知道这确实有用。

P / S：您可以尝试查看一些流行的图书馆的来源，看看他们如何跟踪事件。我不认为他们中的任何一个对pause()和resume()（还）有任何支持，所以它只是为了一些代码灵感。

Answer 2

在问题的背景下，我当然可以在正确通过第一步之后addEventListener 但这不是答案。

Answer 3

您最初可以将输入的disabled属性设置为true。然后，在填写和/或验证每个输入时，您可以将下一个的disabled属性设置为false，以使其可用。

编辑：鉴于问题的更新，这个答案似乎不起作用。在disabled上设置<input type="range">似乎无法阻止wheel事件触发，至少在Chrome中是这样。