防止在引导模式打开时触发按键事件侦听器答案

【问题标题】：Prevent keypress event listener from being triggered while bootstrap modal is open防止在引导模式打开时触发按键事件侦听器
【发布时间】：2021-12-27 18:14:16
【问题描述】：

我有一个使用 node、express 和 ejs 作为视图引擎构建的 Web 应用程序。在特定页面上，我有一个事件监听器，它将在按键时转到主页，如下所示：

<script>
  document.addEventListener("keypress", function onPress(event) {
    window.location = ('/home');
  });

</script>

问题是我在该页面上还有一个按钮，按下该按钮时会显示一个引导模式元素，其中包含文本输入，因此当模式打开并且用户尝试输入某些输入时，会触发事件侦听器。有没有办法在模式关闭之前忽略这个事件监听器？

我尝试为 DOM（不包含模式）提供一个 tabindex 以使其可选择并将事件侦听器放在上面，但是用户必须在触发事件侦听器之前单击页面，这并不理想

【问题讨论】：

您可以使用布尔值来跟踪模型状态（如果打开则为 true，如果关闭则为 false），然后将 window.location = ('/home'); 放入 if 检查 modalOpenState 是真还是假.
@SiddharthBhansali 我尝试通过创建一个使用 jquery 切换模式的 onclick 函数来实现这一点，谢谢
@SiddharthBhansali 请您发布答案，这对其他人会有所帮助，谢谢

标签： javascript html node.js ejs

【解决方案1】：

这里最好的方法是在布尔变量中跟踪modalOpenState。当模态框打开时，设置为true，关闭时设置为false。而当你监听keypress事件时，检查modalOpenState是真还是假，然后进行相应的重定向。

注意：正如 Zameer 的评论还指出的那样，'keypress' 事件已被弃用，并且可以随时停止工作。 MDN 建议根据需要将其替换为 beforeinput 或 keydown 事件。

【讨论】：

【解决方案2】：

您可以使用event.stopPropagation 阻止input 中的event 传播到document，然后用户输入将不会触发文档keypress 侦听器。

document.addEventListener("keypress", function (event) {
  console.log("event", event);
  console.log("keyPress");
});

const input = document.getElementById("user-input");
input.addEventListener("keypress", function (e) {
  e.stopPropagation(); 
});

const btn = document.getElementById("hello-btn");
btn.addEventListener("click", function onClick(e) {
  console.log("clicked btn");
});

<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <button id="hello-btn">Say hello</button>
      <input id="user-input" placeholder="enter text" />
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

但是，我建议不要在document 上附加keypress 事件。根据 MDN，它已被弃用：https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event#browser_compatibility。

【讨论】：