Событие клавиатуры Javascript в объекте - PullRequest
Новая
       9

Событие клавиатуры Javascript в объекте

3 голосов
/ 05 марта 2011

Моя клавиатура работает просто: 

rightPressed = false;

onKeyDown = function(pressEvent) {
  if (pressEvent.keyCode == 39) rightPressed = true;
}
onKeyUp = function(pressEvent) {
  if (pressEvent.keyCode == 39) rightPressed = false;
}

$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

И это сработало. Тогда я попытался поместить все это в класс: 

function Tkeyboard(){
this.rightPressed = false;

this.onKeyDown = function(pressEvent) {
  if (pressEvent.keyCode == 39) { this.rightPressed = true; alert("boom!"); }
}
this.onKeyUp = function(pressEvent) {
  if (pressEvent.keyCode == 39) { this.rightPressed = false; }
}

$(document).keydown(this.onKeyDown);
$(document).keyup(this.onKeyUp);
}

При инициализации я создал объект: 

keys = new Tkeyboard;

В основной цикл я положил действие: 

if ( keys.rightPressed ) { rx+=1;}

И теперь это не удается. Интересная часть проблемы заключается в том, что вызывается alert ("boom!"), Поэтому переменная тоже должна изменяться ...

Буду признателен за любые идеи.

Ответы [ 4 ]

4 голосов
/ 06 марта 2011

Обратный вызов keydown / up теряет свою первоначальную область, когда он фактически выполняется.Вам необходимо связать обратный вызов this.В Prototype Framework вы должны сделать это: 

function Tkeyboard() {
    this.rightPressed = false;

    $(document).keydown(this.onKeyDown.bind(this));
    $(document).keyup(this.onKeyUp.bind(this));
}

Tkeyboard.prototype.onKeyDown = function(pressEvent) {
  if (pressEvent.keyCode == 39) { this.rightPressed = true; alert("boom!"); }
};
Tkeyboard.prototype.onKeyUp = function(pressEvent) {
  if (pressEvent.keyCode == 39) { this.rightPressed = false; }
};

Это должно быть похоже на jQuery .

Если вам нужно знать, как создать полноценный класс клавиатуры, посмотрите тот, который я написал .

2 голосов
/ 06 марта 2011

В обработчике событий в jQuery (и в событиях DOM) this относится к элементу, на который подписано событие (document в образце).Используйте замыкание , если хотите сослаться на исходный объект. 

function Tkeyboard(){
    var self = this;
    this.rightPressed = false;

    this.onKeyDown = function(pressEvent) {
      if (pressEvent.keyCode == 39) { self.rightPressed = true; alert("boom!"); }
    }
    this.onKeyUp = function(pressEvent) {
      if (pressEvent.keyCode == 39) { self.rightPressed = false; }
    }

    $(document).keydown(this.onKeyDown);
    $(document).keyup(this.onKeyUp);
}
1 голос
/ 06 марта 2011

this устанавливается для элемента DOM (в данном случае document), из которого вызывается обработчик события. Как правило, this не привязан к объекту в JavaScript: 

var a = {
    f: function () {}
};
var b = { f: a.f};
var f = a.f;
a.f(); // this === a
b.f(); // this === b
f(); // this === window

Один из наиболее часто используемых обходных путей - привязка this к функции-обертке: 

function bind(func, that) {
    return function() {
        func.apply(that, arguments);
    }
}

//...
$(document).keydown(bind(this.onKeyDown, this));

Или вы можете использовать замыкания: 

function Tkeyboard() {
    var that = this;
// use 'that' from here on
0 голосов
/ 29 марта 2019

Вы можете запустить новую функцию, она будет работать 

    function Tkeyboard() {
    this.rightPressed = false;
    this.onKeyDown = function (pressEvent) {
        if (pressEvent.keyCode == 39) {
            this.rightPressed = true;
            console.log(this.rightPressed )
            alert('boom')
        }
    }
    this.onKeyUp = function (pressEvent) {
        if (pressEvent.keyCode == 39) {
            this.rightPressed = false;
            console.log(this.rightPressed )
        }
    }

    this.events = function(){
        document.addEventListener('keydown', this.onKeyDown);
        document.addEventListener('keyup', this.onKeyUp);

    }
}
const keys = new Tkeyboard;
keys.events();
...