Mousemove问题[jQuery]

Question

我刚刚创建了#element和#box，用于检测它是否超出了视口。如果是这样，它应该高于光标，但这是我的问题。当#box超出视口时，它会一遍又一遍地闪烁，开始变得怪异。希望你们能帮助我。欢呼声。

var box = $("#box");
var element = $("#element");
var PAGEX;
var PAGEY;
var elementTop;
var elementBottom;
var windowHeight;

element.bind({
mousemove: function (e) {
box.show();

PAGEX = e.pageX;
PAGEY = e.pageY;

elementTop = box.offset().top;
elementBottom = elementTop + box.outerHeight();
windowHeight = $(window).height();

if(elementBottom > windowHeight)
{
  box.css({
    top: PAGEY - 65,
    left: PAGEX + 15
  })
}
else
{
  box.css({
    top: PAGEY + 15,
    left: PAGEX + 15
  })
}

},
mouseleave: function () {
box.hide();
}
})

JSFiddle

Answer 1

这里的问题是你正在对实际的盒子位置进行视口外检查，而不是基于mousemove的位置。因此，这是第一次盒子移出视口时的效果 - 您可以将其调整回内部。但是，下次鼠标移动时，您的盒子会安全地进入视口。因此，您的检查会根据鼠标位置调整它，并将其放在视口之外。下次鼠标移动时，计算会起作用，并在内部进行调整，依此类推。

修复方法是改变这个：

function findArray(array) {
  var new_array = [];

  for (var i = 0; i < array.length; i++) {
    if (array[i].url) {
      let obj = {};
      obj['url'] = array[i].url;
      obj['children'] = array[i].children;

      new_array.push(obj);

    }
    if (Array.isArray(array[i].children)) {
      new_array = new_array.concat(findArray(array[i].children));
    }
  }
  return new_array;
}

console.log(findArray(settings));

对此：

if(elementBottom > windowHeight)

因此，它始终根据目标位置的位置计算视口外，而不是根据当前位置的位置计算。