JS - 选择输入字段后禁用事件侦听器

Question

我目前正在向我的文档添加一个事件监听器。使用以下代码效果很好：

document.addEventListener('keydown', function(event) 
{
    if(event.keyCode === 68){
        socket.emit('keyPress', {inputId: 'right', state: true});
    }
    else if(event.keyCode === 83){
        socket.emit('keyPress', {inputId: 'down', state: true});
    }
    else if(event.keyCode === 65){
        socket.emit('keyPress', {inputId: 'left', state: true});
    }
    else if(event.keyCode === 87){
        socket.emit('keyPress', {inputId: 'up', state: true});
    }
});

document.addEventListener('keyup', function(event) 
{
    if(event.keyCode === 68){
        socket.emit('keyPress', {inputId: 'right', state: false});
    }
    else if(event.keyCode === 83){
        socket.emit('keyPress', {inputId: 'down', state: false});
    }
    else if(event.keyCode === 65){
        socket.emit('keyPress', {inputId: 'left', state: false});
    }
    else if(event.keyCode === 87){
        socket.emit('keyPress', {inputId: 'up', state: false});
    }
});

但是一旦我选择一个输入字段并键入包含 W、A、S、D 的内容，就会触发 EventListener。

有没有办法在选择输入字段后禁用事件监听器？

Answer 1

是的，检查 event.target 是什么，如果它是您的输入元素，则返回，如果不是，则让代码继续。

document.addEventListener('keydown', function(event) {
  if(event.target === someReferenceToYourElement){
     return;
  }
  //rest of code
});

Answer 2

您需要禁用输入的事件冒泡。像这样的东西：

input.addEventListener('keyup', function (e) {

  e.stopPropagation();

}, false);
input.addEventListener('keydown', function (e) {

  e.stopPropagation();

}, false);

因此，使用上面的代码，您将禁用

keyup

和

keydown

事件冒泡，并且输入的任何一个父节点都不会听到这些事件

Answer 3

您可以在输入焦点上添加事件侦听器。

document.getElementsByTagName('input').addEventListener('focus', function(e) {
    e.StopPropagation();
}

Answer 4

我建议你做这样的事情：

$('document').keypress(function(event) {
    if (event.which == 65) { // A
        // Do your stuff
    }
})

此代码与您的代码相同，但位于整个 DOM 上。

$('#input').val.indexOf('a')

此代码将检查您的字段是否包含字母 A，可以是字符串 'abcd' 或 'bar' 等。

如果你想检查字段何时失去焦点，你也可以使用jquery的事件模糊https://api.jquery.com/blur/

Answer 5

是的。您可以在输入字段中键入内容时禁用按键事件，方法是检查事件的目标是否是输入字段，如果是，则不执行任何操作。

document.addEventListener("keydown", function (event) {
  if (event.target.tagName === "INPUT") {
    return;
  }
  // Logic for keydown
});