How to check whether the mouse is moving upwards or downwards using JavaScript?

user_6018747 0
Viewed 822

I found this solution in another topic. It works correctly when moving your mouse downwards.

However, if you move your mouse upwards with a little curve in it, the console will both log From Top and 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>

How can I accurately measure if the mouse is moving upwards or downwards?

jquery javascript
4 Answers

I think your code snippet works fine. Perhaps the only actual thing needed in order to see that you get some false positives when the mouse is moving left-right or the opposite is to make a small addition in your code as seen below.

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

Admin1

You can check mouse position 1 second after mousemove, And to do this use setTimeout

$(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";
    }
  });
});
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>
<div id="mousemove"></div>

500 means 0.5 second, You can change it.

If you little tangle during mouse move it will only check after 1 second, means if you are going upward and between 1 second if you tangled to down by 1-2 px, it will log as upward.

After 0.5 half second it sets position and again check that in which direction you are moving.

Another way is to check that you moved at least 5 px

$(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";
    }
  });
});
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>
<div id="mousemove"></div>

user_28156350
Related