Question

我已经编写了一个检测鼠标方向的功能，它有效但它有一个bug。当我第一次将鼠标指针从左侧放入div时，该函数计算出鼠标的指针有当它第一次被调用时向右移动，然后它运行良好。我不知道我是否解释了我的问题，但你可以很容易地看到你的浏览器控制台中的错误印刷值。

这是我的代码

<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，因此它将始终记录＆＃ 34;右＆＃34;第一次。

解决这个问题的一种方法是将其初始化为-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 storageMousePositionX设置为0。您应该在输入div时第一次设置它。

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

请参阅此fiddle

函数中的错误检测鼠标方向

2 个答案: