停止在另一个事件侦听器中传播特定事件 [英] Stop propagation of a specific event inside another event listener

问题描述

我为 window 对象上的resize事件附加了一个侦听器.在代码的更深处，我有一些 input 字段.

为避免在android设备上出现某些问题，我想在输入字段为焦点时防止调整大小的监听器被触发(与IOS不同，在打开键盘时android设备调整浏览器窗口的大小)./p>

main.js

  window.addEventListener('resize'，()=> {//这里有一些东西}); 

someFile.js

  field.addEventListener('input'，()=> {//在这里我只想禁用一次resize事件}); 

我遇到了以下解决方案，但到目前为止没有成功:

removeEventListener()

根本不适合，因为我需要指定对侦听器功能的引用.我不仅必须逐个删除侦听器，还必须列出所有侦听器，然后重新绑定它们.

event.stopPropagation()

someFile.js

  field.addEventListener('focusin'，()=> {window.addEventListener('resize'，event => {event.stopPropagation();//也尝试过event.stopImmediatePropagation()});}); 

但是由于侦听器是按已声明的顺序调用的，因此它不会阻止任何操作(最后声明).另外，我必须重新绑定 focusout 上的所有内容.

我想要的

我知道使用全局变量可以达到我想要的目的的一些技巧，但是它们有点丑陋，更不用说我尝试尽可能避免全局变量了.>

是否有任何优雅的方法可以在所有调整大小的侦听器上调用早期的 stopPropagation()类似函数，并防止它们从代码内部的深层功能触发?

或者是否存在更好的体系结构，例如，可以在页面上的任何输入元素获得焦点时触发的全局函数，并且无论所关注的元素如何，都可以阻止resize事件?

解决方案

我将无条件添加 resize 侦听器 ，并在其中检查 document.activeElement 是字段之一:

  window.addEventListener(调整大小"，(e)=>{如果(document.activeElement&& document.activeElement.matches('input')){console.log('传播停止');e.stopPropagation();} 别的 {console.log('传播未停止');}}，true//使用第三个参数在此处启用useCapture//尽早停止传播);  

 < input>  

更改传递给 matches 的选择器字符串以符合您的需求.上面的代码段使用了 input ，它将匹配任何输入字段.如果您只想在焦点输入具有 foo 类时停止传播，则可以使用

  .matches('input.foo') 

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

  .matches('input，textarea') 

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

还请记住，Javascript语法需要直接引号，而不是所谓的智能引号，这会导致语法错误.

I have a listener attached to resize event on window object. Deeper in my code, I have some input fields.

To avoid some issues on android devices, I’d like to prevent resize listeners from being fired when an input field is focused (android device resize browser window when opening keyboard, unlike IOS).

main.js

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

someFile.js

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

I came accross the following solutions, without any success so far :

removeEventListener()

Not suitable at all, since I need to specify a reference to the listener function. Not only do I have to remove listeners one by one, I also have to list them all, and rebind them after.

event.stopPropagation()

someFile.js

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

But since listeners are called in declared order, it doesn’t prevent anything (it is declared last). Plus I have to rebind everything again on focusout.

What I want

I’m aware of some tricks using global variables that can achieve what I want, but they are kinda ugly, not to mention I try to avoid global variables as much as I can.

Is there any elegant way, to invoke an early stopPropagation() like function on all resize listeners, and prevent them from firing from deep function inside code ?

Or is there a better architecture, for example a global function that can trigger when any input element on the page gets focus, and prevent the resize event regardless of the focused element ?

解决方案

I'd add a resize listener unconditionally, and inside it, check if document.activeElement is one of the fields:

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>

Change the selector string passed to matches to match your needs. The above snippet uses input, which will match any input field. If you only want to stop propagation when the focused input has a class of foo, you'd use

.matches('input.foo')

To match multiple selectors, separate them with a comma, eg

.matches('input, textarea')

will match both an input and a textarea.

Also keep in mind that Javascript syntax requires straight quotes, not so-called smart quotes, which will cause syntax errors.

这篇关于停止在另一个事件侦听器中传播特定事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！