对象中的 Javascript 键盘事件

Question

我用一种简单的方式让我的键盘工作：

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

现在它失败了。问题的有趣部分是调用了警报（“boom！”），因此变量也应该被修改......

我将不胜感激任何想法。

Answer 1

当实际运行时， keydown/up 回调将失去其原始范围。您需要将回调绑定到this。在原型框架中，您可以这样做：

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。

如果您需要了解如何构建完整的键盘类，请查看 我的那个写道。

Answer 2

在 jQuery 中的事件处理程序中（以及在 DOM 事件中），this< /code> 指订阅事件的元素（示例中的 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);
}

Answer 3

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

Answer 4

你可以启动新功能它会起作用

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