マウスの方向を検出する関数のバグ

マウスの方向を検出する関数を書いていますが、動作しますが、バグがあります。最初にdivの中にマウスのポインタを置くと、最初の呼び出し時に正しい方向に、それはうまく動作します。私は私の問題をwll説明したかどうかは分かりませんが、ブラウザのコンソールで最初の印刷された値を見てバグを簡単に見ることができます。マウスの方向を検出する関数のバグ

これは私のコード

<body> 
    <div id="padre-relative"> 

    </div> 
</body> 



#padre-relative{ 
    position:relative; 
    width:300px; 
    height:300px; 
    overflow: hidden; 
    background: red; 
    margin-left:300px; 

} 





window.onload=function(){ 

var storageMousePositionX=0; 

     var positionMouseX=0; 


      document.getElementById("padre-relative").onmousemove= function(){ 


         positionMouseX=event.clientX; 

    if(positionMouseX > storageMousePositionX){ 

     console.log("right"); 

    } 
    if(positionMouseX < storageMousePositionX){ 
     console.log("left"); 

    } 
    storageMousePositionX=positionMouseX; 

};  

};

出典

2016-05-27 Fistright

これはbeacauseロード時にvar storageMousePositionXを0に設定します。 divを入力するときは、初めて設定する必要があります。

document.getElementById("padre-relative").onmouseenter = function(){ 
    storageMousePositionX = event.clientX; 
}

が、これはfiddle

出典

2016-05-27 15:41:25 NicossB

は、ああ、それは奇妙である神、私は同じことを行っていたが、それは動作しませんを参照してください:) – Fistright

あなたの問題ですが、あなたは0からstorageMousePositionXを初期化しているということですので、初めてお使いonmousemoveハンドラの火災、それは常に「権利を記録しますので、event.clientXは常に、0より大きくなります" 初めて。それを修正するために

一つの方法は、それを初期化すること-1、その後、あなたが何か初めてのdivの上にマウスの動きを記録しませんので、その値に対してチェックします：

window.onload = function(){ 
    var storageMousePositionX=-1; 

    document.getElementById("padre-relative").onmousemove = function(){ 
     var positionMouseX=event.clientX; 

     if (storageMousePositionX > -1) { 
      if(positionMouseX > storageMousePositionX){ 
       console.log("right");  
      } 
      if(positionMouseX < storageMousePositionX){ 
       console.log("left"); 
      } 
     } 
     storageMousePositionX = positionMouseX; 
    }; 

};

出典

2016-05-27 15:31:41

マウスの方向を検出する関数のバグ

答えて

関連する問題