javascript - 有没有办法动态暂停元素的所有事件监听器？

Question

我现在正在制作逐步填写的类似表单的页面(希望它在语法上是正确的☺)。

这里的主要思想非常简单:当第一步没有完成时，第二步就无法实现。
我需要它真正不可用，而不仅仅是 CSS 隐藏(如 opacity: 0; 或 visibility: hidden; )。

所以，问题是:在 JavaScript 中，有没有办法动态暂停(并稍后取消暂停)所有 eventListener某些元素的 s？

P.S.:事件例如是 onwheel || onmousewheel .

<小时/>

这是图像(抱歉是西里尔字母):
(这是关于记分表输入的问题。)

您会看到<input type="range">元素在这里。鼠标在其上滚动将更改其值。

表单的第一步尚未完成；所以第二个必须不可用，并且鼠标滚动到 input range元素不应该工作。
但这一次我用 opacity: .3; 成功了。 .
所以一切正常，但图片有点半透明，仅此而已。
这很糟糕。
它根本不应该对鼠标滚轮使用react(只是通常的页面滚动)。
并且不透明度必须为全( opacity: 1; )。
那么，我们回到最初的问题。

Answer 1

在 JavaScript 中甚至无法列出某个元素的所有事件监听器，因此停止它们是一个更高的命令。

简而言之，您的问题的答案是:没有通用的方法来暂停所有事件监听器。

但是，您可以尝试一些方法来帮助实现您的意图。

A 计划 - HTML/CSS + 一点 JS:如果您的目的只是为了防止事件到达未激活的步骤，您可以尝试一种 hack:创建一个透明的“阻止器”元素完全相同的尺寸。当您“禁用”您的步骤时，“启用”您的拦截器使其位于其正上方 - 可能使用绝对定位，例如

// 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 来创建拦截器。如果没有，您可以在计算完步骤2的位置/尺寸后使用JS在运行时创建拦截器。

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

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

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

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

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

P/S:您可以尝试查看一些流行库的源代码，看看他们如何跟踪事件。我认为他们中没有人对pause()有任何形式的支持。和resume() (还)，所以这只是为了一些代码灵感。