当鼠标离开浏览器时停止保存到 JSON 文件

Question

我目前通过使用以下方法每 1 秒将鼠标移动坐标保存到一个 JSON 文件中：

window.onload = function() {
  setInterval(track, 1000);
}

track 是通过 ajax.

将坐标保存到 json 文件的函数

然而，当鼠标不在浏览器上时使用此方法，该函数仍然每秒刷新一次，因此使用事件中最后保存的坐标。clientX/Y。

我知道 onmouseenter 和 onmouseout 函数，但是我没有成功地实现它们以达到我的目的。我已经测试了如下功能：

document.onmouseenter = function(i){
  console.log('IN');
}

document.onmouseleave = function(l){
  console.log('OUT');
}

但是，上面的onmouseenter 函数只在第一次点击时输出'IN'。虽然 onmouseleave 函数从不输出 'OUT'.

如有任何建议，我们将不胜感激

Answer 1

如何在保存后取消设置 x/y，然后在您尝试保存时检查它们是否已设置？

var x, y; // store mouse coords

window.addEventListener('mousemove', function(e) {
  x = e.clientX;
  y = e.clientY;
});

setInterval(function() {
  if (x !== undefined && y !== undefined) { // check if they're set
    // save your locations, only called when mouse is moved on page
    x = y = undefined; // unset them
  }
}, 1000);

Answer 2

您可以使用以下代码。如有必要，请根据您的要求进行修改。基本上你需要处理以下事件：

Window 加载
标签焦点
Window 模糊 [而不是鼠标移出]
Window 卸载前 [关闭浏览器前]

$(document).ready(function() {

  $(window).load(function() {
    // Call your function to START storing the data
  });

  $(window).focus(function() {
    // Call your function to START storing the data
  });

  $(window).blur(function() {
    // Call your function to STOP storing the data
  });

  //tabCloseEvent();
  $(window).bind('beforeunload', function() {
    // Call your function to STOP storing the data
  });



});

当鼠标离开浏览器时停止保存到 JSON 文件

Stop saving to JSON File when mouse is out of the broswer

javascript

jquery

json

event-handling

mouseevent