javascript - page.Y 返回错误值

Question

我有以下 jQuery 和 JS 代码:

$(function() {
  function addMouseEvents() {
    $('img').addClass('close-overlay-active')
    var close_H = ($('.close-overlay-active').height() * 1.2);
    var close_W = ($('.close-overlay-active').width() * 1.2);
    document.addEventListener('mousemove', function(e) {
      // console.log('move');
      // console.log(e.pageX + " " + e.pageY ); 
      var mouseX = e.pageX,
        mouseY = e.pageY;

      $('.close-overlay-active')
        .css({
          top: (mouseY - close_H),
          left: mouseX - close_W
        });
    });
  }


  addMouseEvents();
});

当然，期望的行为是“x”标记略高于光标。大多数情况下确实会发生这种情况，但有时“x”出现在光标下方，靠近光标右下角，有时出现在光标下方1000px。为什么会出现这种情况？ e.pageY 有时似乎返回错误的值，为什么？

有人可以解释一下这种行为吗？

<强> FIDDLE HERE

Answer 1

试试这个:

$(function() {
  function addMouseEvents() {
    $('img').addClass('close-overlay-active')
    var close_H = ($('.close-overlay-active').height());
    var close_W = ($('.close-overlay-active').width());
    document.addEventListener('mousemove', function(e) {
      // console.log('move');
      // console.log(e.pageX + " " + e.pageY );	
      var mouseX = e.pageX,
        mouseY = e.pageY;

      $('.close-overlay-active')
        .css({
          top: (mouseY - close_H),
          left: mouseX - close_W / 2
        });
    });
  }


  addMouseEvents();
});

img {
  position: absolute;
  top: 0;
  left: 0;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #b0e2ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="fixed">
  <img src="https://cdn3.iconfinder.com/data/icons/sympletts-free-sampler/128/circle-close-128.png">
</div>

要将光标精确定位在中心，请参阅此 FIDDLE