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>

Answer 2

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文はページ座標を比較した後に上に移動し、elseの場合はその逆になります。その後、我々は、yが変数に私の

Answer 3

試してみてください。この:)座標保存：あなたはmousemove後にマウスの位置に1秒を確認することができます

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

を、そしてこの使用を行うには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は0.5秒を意味します。変更することができます。

マウスの移動中に少し絡み合った場合は、1秒後にのみチェックします。上向きに移動する場合は1秒間、下向きに1〜2回移動する場合は1秒間です。

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>