JS-一旦选择了输入字段，请禁用Eventlistener

Question

I'm currently adding a EventListener to my document. Which works great using the following code:

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});
    }
});

But once I would select a input field and type something containing W, A, S, D then the EventListener would be triggered.

Is there a way to disable the eventListener once the input field is selected?

Answer 1

You need to disable event bubbling from input. Something like this:

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

  e.stopPropagation();

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

  e.stopPropagation();

}, false);

So using code above you will disable keyup and keydown event bubbling and no one parent node of the input will not hear these events

Answer 2

Yes check what event.target is, if it is your input element just do a return, if not then let the code continue on.

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

Answer 3

You could add an event listener on the focus of the input.

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

Answer 4

I suggest to you to do something like that:

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

This code is the same as your but on the entier DOM.

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

This code will check if your field contains the letter A, can be the string 'abcd' or 'bar', etc.

If you want to check when the field loose the focus you can also you the event blur of jquery https://api.jquery.com/blur/