javascript - 如何使用 JavaScript 检查鼠标是向上还是向下移动？

Question

我在另一个主题中找到了这个解决方案。向下移动鼠标时它可以正常工作。

但是，如果您向上移动鼠标并带有一点曲线，控制台将同时记录From Top 和From Bottom。

$(document).ready(function() {
  var mY = 0;
  $(document).mousemove(function(e) {

      // moving upward
      if (e.pageY < mY) {
          console.log('From Bottom');
           // moving downward
      } else {
          console.log('From Top');
      }

      // set new mY after doing test above
      mY = e.pageY;

  });
});

code {
  background: #ededed;
  padding: 0 5px;
}

span {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

So instead of moving <span>straight up</span>, go from the <span>left bottom corner</span> to the <span>right top corner</span> with a small <span>curve</span>. Moving your mouse up or down. It will log both <code>From Top</code> and <code>From Bottom</code>

如何准确测量鼠标是向上还是向下移动？

Answer 1

我认为您的代码片段工作正常。当鼠标左右移动或相反移动时，为了看到您得到一些误报，唯一实际需要做的就是在您的代码中添加一些小内容，如下所示。

$(document).ready(function() {
  var mY = 0;
  $(document).mousemove(function(e) {

      // moving upward
      if (e.pageY < mY) {
          console.log('Up');
           // moving downward
      } else if (e.pageY > mY) {
          console.log('Down');
          // movement on horizontal axis
      } else {
          console.log('Moving left-right or the opposite');
      }

      // set new mY after doing test above
      mY = e.pageY;

  });
});

code {
  background: #ededed;
  padding: 0 5px;
}

span {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

So instead of moving <span>straight up</span>, go from the <span>left bottom corner</span> to the <span>right top corner</span> with a small <span>curve</span>. Moving your mouse up or down. It will log both <code>From Top</code> and <code>From Bottom</code>