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

所需的行为是针对＆＃39; x＆＃39;标记略高于光标。这确实发生在大多数时间，但有时候＆＃39; x＆＃39;出现在光标右下方的光标下方，有时在光标下方1000px。为什么会这样？ e.pageY似乎有时会返回错误的值为什么？

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

FIDDLE HERE

Answer 1

试试这个：

＆＃13;

$(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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

要将光标准确放在中心，请参阅此FIDDLE

page.Y返回错误的值

1 个答案: