停止在另一个事件侦听器中传播特定事件

Question

我有一个侦听器附加到 window 对象上的调整大小事件。在我的代码的更深处，我有一些 input 字段。

为了避免在 android 设备上出现一些问题，我想 防止调整大小侦听器被触发 当输入字段被聚焦时（android打开键盘时设备调整浏览器大小 window，与 IOS) 不同。

main.js

window.addEventListener(‘resize’, () => {
  // Some stuff here
});

someFile.js

field.addEventListener(‘input’, () => {
  // Here I want to disable the resize event only once
});

我遇到了以下解决方案，到目前为止没有任何成功：

removeEventListener()

根本不适合，因为我需要指定对侦听器函数的引用。不仅要把监听器一个一个去掉，还要全部列出来，然后重新绑定。

event.stopPropagation()

someFile.js

field.addEventListener(‘focusin’, () => {
  window.addEventListener(‘resize’, event => {
    event.stopPropagation();
    // also tried event.stopImmediatePropagation()
  });
});

但是由于侦听器是按声明顺序调用的，所以它不会阻止任何事情（最后声明）。另外，我必须在 focusout.

上重新绑定所有内容

我想要的

我知道一些使用全局变量的技巧可以达到我想要的效果，但它们有点难看，更不用说我尽量尽量避免使用全局变量.

有什么优雅的方法可以在所有调整大小的侦听器上调用一个早期的stopPropagation()函数，并防止它们从代码内部的深层函数触发？

或者是否有更好的体系结构，例如可以在页面上的任何输入元素获得焦点时触发的全局函数，并且无论焦点元素如何都阻止调整大小事件？

Answer 1

我会无条件地添加一个 resize 侦听器，并在其中检查 document.activeElement 是否是以下字段之一：

window.addEventListener(
  'resize',
  (e) => {
    if (document.activeElement && document.activeElement.matches('input')) {
      console.log('propagation stopped');
      e.stopPropagation();
    } else {
      console.log('propagation not stopped');
    }
  },
  true // enable useCapture here with this third argument
       // to stop propagation as early as possible
);

<input>

更改传递给 matches 的选择器字符串以满足您的需要。上面的代码片段使用 input，它将匹配任何输入字段。如果您只想在焦点输入的 class 为 foo 时停止传播，您可以使用

.matches('input.foo')

要匹配多个选择器，用逗号分隔，例如

.matches('input, textarea')

将同时匹配输入和文本区域。

另请记住，Javascript 语法需要直引号，而不是 so-called 智能引号，这会导致语法错误。

停止在另一个事件侦听器中传播特定事件

Stop propagation of a specific event inside another event listener

javascript

event-listener

dom-events

stoppropagation