捕获单个键输入事件Jquery

Question

我正在听10秒的键和鼠标输入，并将对象“记录”到包含事件发生时间的数组，以及鼠标输入的mouseX和Y，以及按下哪个键。最后，我想通过一些动画功能和用户输入的“回放”来运行这个“历史”。

一件奇怪的事情正在发生，我只按一次键，最后希望keyCapture是一个带有一个对象的数组。相反，我变得像100+对象，我不知道为什么。其中许多都是重复的，即使时间是相同的。

function captureInput() {

mouseCapture = [];
keyCapture = [];

$(document).on('mousemove.capture', function(e) {
  var time = new Date().getTime();
  mouseCapture.push({
    x: e.pageX, 
    y: e.pageY,
    t: time
  });

  $(document).on('keyup.capture', function(e) {
    var time = new Date().getTime();
    keyCapture.push({
      key: e.which,
      t: time
    })
  });

});

setTimeout(function() {
  $(document).off('.capture');
  console.log(mouseCapture);
  console.log(keyCapture);
}, 10000);

}

如何更改代码，以便只为每个keyup事件推送一个keyup对象？

Answer 1

你在鼠标事件中注册你的按键(每次，一次又一次)！将它移到函数调用之外：

function captureInput() {

    mouseCapture = [];
    keyCapture = [];

    $(document).on('mousemove.capture', function (e) {
        var time = new Date().getTime();
        mouseCapture.push({
            x: e.pageX,
            y: e.pageY,
            t: time
        });

    });

    $(document).on('keyup.capture', function (e) {
        var time = new Date().getTime();
        keyCapture.push({
            key: e.which,
            t: time
        })
    });

    setTimeout(function () {
        $(document).off('.capture');
        console.log(mouseCapture);
        console.log(keyCapture);
    }, 10000);

}

我使用TidyUp按钮在JSFiddle.net上格式化了代码。当缩进正确时，问题变得很明显:)

Answer 2

我用语法高亮笔注意到了这一点。

$(document).on('mousemove.capture', function(e) { // starts
  var time = new Date().getTime();
  mouseCapture.push({
    x: e.pageX, 
    y: e.pageY,
    t: time
  });

  // }); should end here 

  $(document).on('keyup.capture', function(e) {
    var time = new Date().getTime();
    keyCapture.push({
      key: e.which,
      t: time
    })
  });

}); // ends

您的问题似乎是，每次移动鼠标时，您都会继续创建侦听事件，所以当您按下键时，所有这些都会运行，从而产生许多对象