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的位置进行视图外检查。所以，这是在盒子第一次移出视口的时候起作用的--你把它调回到里面。但是，下一次鼠标移动时，你的盒子就安全地进入了视口。因此，您的检查将根据鼠标位置调整它，然后将其放到视口之外。下一次鼠标移动时，计算就开始工作了，然后在里面进行调整，依此类推。

解决办法是改变这种情况：

if(elementBottom > windowHeight)

对此：

if(PAGEY + 15 + box.outerHeight() > windowHeight)

因此，它总是根据目标位置，而不是当前位置的位置来计算出视口。