检测鼠标方向的功能错误

Question

我已经编写了一个检测鼠标方向的函数并且它可以工作但是它有一个 bug.When 我第一次将鼠标指针从左侧放入 div 该函数计算出鼠标指针具有第一次调用时向右移动，然后它起作用 well.I 不知道我是否解释了我的问题，但您可以很容易地在浏览器的控制台中看到第一个打印值时的错误。

这是我的代码

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

};    

};

Answer 1

您的问题是您正在将 storageMousePositionX 初始化为 0，因此您的 onmousemove 处理程序第一次触发时，event.clientX 将始终大于 0，因此它将始终记录"right"第一次。

修复它的一种方法是将其初始化为 -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;
    };

};

Answer 2

这是因为您在加载时将 var storage MousePosition X 设置为 0。第一次输入div时应设置。

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

看到这个fiddle

检测鼠标方向的功能错误

Bug in Function to detect mouse direction

html

javascript

css

mouse