我现在正在制作逐步填写的类似表单的页面(希望它在语法上是正确的☺)。
这里的主要思想非常简单:当第一步没有完成时,第二步就无法实现。
我需要它真正不可用,而不仅仅是 CSS 隐藏(如 opacity: 0;
或 visibility: hidden;
)。
所以,问题是:在 JavaScript 中,有没有办法动态暂停(并稍后取消暂停)所有 eventListener
某些元素的 s?
P.S.:事件例如是 onwheel || onmousewheel
.
这是图像(抱歉是西里尔字母):
(这是关于记分表输入的问题。)
您会看到<input type="range">
元素在这里。鼠标在其上滚动将更改其值。
表单的第一步尚未完成;所以第二个必须不可用,并且鼠标滚动到 input range
元素不应该工作。
但这一次我用 opacity: .3;
成功了。 .
所以一切正常,但图片有点半透明,仅此而已。
这很糟糕。
它根本不应该对鼠标滚轮使用react(只是通常的页面滚动)。
并且不透明度必须为全( opacity: 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()
(还),所以这只是为了一些代码灵感。
关于javascript - 有没有办法动态暂停元素的所有事件监听器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30940294/