Question

我正在向我的文档添加一个EventListener。使用以下代码可以很好地使用：

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。

一旦选择了输入字段，有没有办法禁用eventListener？

Answer 1

您需要从输入中禁用事件冒泡。像这样：

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

  e.stopPropagation();

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

  e.stopPropagation();

}, false);

因此，使用上面的代码，您将禁用keyup和keydown事件冒泡，并且输入的任何一个父节点都不会听到这些事件

Answer 2

是检查event.target是什么，如果是你的输入元素只是做一个返回，如果不是，那么让代码继续。

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

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/

JS - 选择输入字段后禁用Eventlistener

4 个答案: