Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

您可以在mousemove后1秒检查鼠标位置，为此，请使用setTimeout

＆＃13;

$(document).ready(function() {
  var mY = 0;
  
  $(document).mousemove(function(e) {
    if(mY != e.pageY){// Works only if pageY changes
      if (e.pageY < mY) {
         document.querySelector("#mousemove").innerHTML = "From Bottom";
      } else {
        document.querySelector("#mousemove").innerHTML = "From Top";
      } 
      setTimeout(function(){
        mY = e.pageY;
      },500);//500 means 0.5 second, You can change it
    }else{
      document.querySelector("#mousemove").innerHTML = "Left Right";
    }
  });
});

＆＃13;

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

＆＃13;

<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>
<div id="mousemove"></div>

＆＃13;

500表示0.5秒，您可以更改它。

如果你在鼠标移动过程中一点点纠结，它只会在1秒后检查，意味着如果你向上走，如果你纠结到下降1-2 px，它会在1秒之内检查，它会以向上的方式记录。

在0.5半秒后，它会设置位置并再次检查您正在移动的方向。

另一种方法是检查您是否至少移动了5 px

＆＃13;

$(document).ready(function() {
  var mY = 0;
  
  $(document).mousemove(function(e) {
    if(mY != e.pageY){// Works only if pageY changes
      //console.log(Math.abs(e.pageY - mY));
      if (Math.abs(e.pageY - mY) > 4 ) {
        if (e.pageY < mY) {
          document.querySelector("#mousemove").innerHTML = "From Bottom";
        } else {
          document.querySelector("#mousemove").innerHTML = "From Top";
        }
      }
      mY = e.pageY;
    }else{
      document.querySelector("#mousemove").innerHTML = "Left Right";
    }
  });
});

＆＃13;

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

＆＃13;

<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>
<div id="mousemove"></div>

＆＃13;

Answer 2

我认为您的代码段工作正常。也许唯一真正需要的东西是为了看到当鼠标左右移动时你得到一些误报，或者相反的是在你的代码中做一些小的补充，如下所示。

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

Answer 3

试试这个:)：

var oldx = 0;
if (e.pageX > oldx) {
    console.log('From Right');
} else(e.pageX < oldx) {
            console.log('From Left');
}
oldx = e.pageX;

https://codepen.io/headmax/pen/mBdMvg?editors=1111

Answer 4

var mY = 0;
$('body').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;

});

这使用jquery。我们选择整个身体并添加检测鼠标的移动鼠标功能。第一个if语句在比较页面坐标后向上移动，反之亦然。然后我们将y坐标保存到变量mY

中

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

4 个答案: