时间戳

首页 > 解决方案 > 当输入处于焦点时阻止 evenListener

javascript - 当输入处于焦点时阻止 evenListener

问题描述

我在脚本中设置了一些键绑定，但是当我的注意力集中在输入字段上时，我不希望它们触发。我已经尝试过 removeEventListener() 但无法完全按照我想要的方式工作。

document.addEventListener("keydown", (e) => {
  if (e.code == "Enter") {
    e.preventDefault();
    toggleHiddenElements();
  }
  else if (e.code == "KeyA") {
    toggleScene("vorspann");
  }
  else if (e.code == "KeyE") {
    toggleScene("abspann");
  }
  else if (e.code == "KeyL") {
    loadSetup();
  }
  else if (e.code == "KeyR") {
    resetUI();
  }
});

这是输入字段之一，例如：

<input type="text" id="vorspann-thema" placeholder="Enter a title">

最简单的解决方案是使用通常不需要的绑定，例如 F 键，但遗憾的是它们必须是 A、E、L、R 和 Enter。

以下建议无效：

var speakerfocus = false;

function getfocus(e) {
  speakerfocus = true;
  console.log(speakerfocus);
}

document.getElementById("speakers-schmal").addEventListener("click", getfocus);

document.addEventListener('click', removefocus);

function removefocus(e) {
  if (e.target != document.getElementById("bauchbinde-schmal")) {
    speakerfocus = false;
    console.log(speakerfocus);
    return;
  }
};

标签： javascripthtmladdeventlistener

解决方案

使用一个布尔标志来确定输入是否在焦点上。为输入添加点击事件监听器，如果标志为真，则将其更改为假，否则将其更改为真。然后你可以在你的键绑定中使用 if 语句。

let focus = false;
document.getElementById('vorspann-thema').addEventListener('click', () => {
focus = true;
});
document.addEventListener('click', (e) => {
if (e.target != document.getElementById('vorspann-thema') focus = false;
});

推荐阅读