Question

嗨，我知道这可能是一个愚蠢的问题，但我今天才开始学习javascript，但我想知道是否有人可以帮助我或将我指向正确的方向我想知道如何在用户输入输入内容时阻止运行在键按下时触发的功能

javascript

window.addEventListener("onkeydown", keyDown, true);
window.addEventListener("keydown", keyDown);

function keyDown(e) {
  switch (e.keyCode) {
    case 86: // Key V = myFunction
      myFunction();
      break;
    }
}

    function myFunction() {
      // do something
      console.log("oh no the function fired why typing in the input!")
    }

输入

<input type="text" name="message" class="chat-input" placeholder="Enter your chat message..." maxlength="140">

Answer 1

创建一个布尔值并在函数中使用

let canExecute = true;
window.addEventListener("onkeydown", keyDown, true);
window.addEventListener("keydown", keyDown);

function keyDown(e) {
  switch (e.keyCode) {
    case 86: // Key V = myFunction
      myFunction();
      break;
  }
}

function myFunction() {
  if (canExecute) {
    // this will only execute once
    // do something
    console.log("oh no the function fired why typing in the input!")
  } 

  canExecute = false;
}

<input type="text" name="message" class="chat-input" placeholder="Enter your chat message..." >

Answer 2

我认为这与退出函数无关……似乎用户要求避免如果焦点在输入表单元素上，则避免运行与窗口onkey事件关联的事件。

为此，您不能将window.addEventListener（“ onkeydown”，keyDown，true）声明为true，因为这会将keyDown函数与捕获事件处理序列相关联。您需要关联到冒泡，因此在最后一个参数中使用false代替。

window.addEventListener("keydown", keyDown, false);

然后在输入中关联一个虚拟事件处理程序，并停止事件的传播，如下所示：

var inputObj = document.querySelector(".chat-input");
inputObj.addEventListener("keydown", function(e) {
    e.stopPropagation();
}, false);

如果浏览器将焦点放在输入元素上，则将在窗口处理程序之前触发inputObj事件处理程序，并且通过停止传播，该事件将不会传播到窗口处理程序，因此keyDown函数将不会接收该事件。 / p>

执行此操作的另一种方法是检查e.target属性，该属性包含触发事件时聚焦的元素，并在需要时丢弃该事件。

例如查看What is event bubbling and capturing?以获得更多信息。

如果用户输入输入，则停止运行功能

2 个答案: