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

}

我使用JSFiddle.net上的TidyUp按钮格式化代码。当缩进正确时，问题变得明显：）

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

您的问题似乎是每次移动鼠标时都会继续创建监听事件，所以当您按下某个键时，所有这些都会运行，导致很多对象

捕获单个键输入事件Jquery

2 个答案: