防止在 bootstrap 模态打开时触发按键事件侦听器

Question

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

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

</script>

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

我试过给 DOM（不包含模态）一个 tabindex 使其可选择并将事件监听器放在上面，但是用户必须在事件监听器可以之前单击页面被触发，这是不理想的

Answer 1

您可以使用 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.

Answer 2

此处最好的方法是在布尔变量中跟踪 modalOpenState。当模式打开时，将其设置为 true，关闭时将其设置为 false。当你监听 keypress 事件时，检查 modalOpenState 是真还是假，然后相应地重定向。

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

防止在 bootstrap 模态打开时触发按键事件侦听器

Prevent keypress event listener from being triggered while bootstrap modal is open

html

javascript

ejs

node.js