How to check if the mouse moves up or down using JavaScript?

Question

I found this solution in another thread. It works correctly when moving the mouse down.

However, if you move the mouse up with a slight curve in it, the console will register From Topand 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>

Run codeHide result

How can I accurately measure whether the mouse moves up or down?

Answer 1

I think your piece of code works fine. Perhaps the only real thing you need to see is that you get false positives when the mouse moves left and right or vice versa to make a small addition to your code, as shown 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>

Run codeHide result

Answer 2

1 mousemove, 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>

Hide result

500 0,5 , .

, 1 , , 1 , 1-2 , .

0.5 , .

- , 5

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

Hide result

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