Fatal编程技术网
  • javascript/
  • Javascript 检测鼠标方向的功能中存在错误

Javascript 检测鼠标方向的功能中存在错误

javascript html css

Javascript 检测鼠标方向的功能中存在错误,javascript,html,css,mouse,Javascript,Html,Css,Mouse,我写了一个检测鼠标方向的函数，它可以工作，但它有一个bug。当我第一次将鼠标指针从左侧放入div时，该函数计算鼠标指针在第一次调用时已向右移动，我不知道我是否解释了我的问题，但是你可以很容易地在浏览器的控制台中看到第一个打印的值 这是我的密码 <body> <div id="padre-relative"> </div> </body> #padre-relative{ position:relative;

我写了一个检测鼠标方向的函数，它可以工作，但它有一个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;

};    

};


#教士亲属{
位置：相对位置；
宽度：300px；
高度：300px；
溢出：隐藏；
背景：红色；
左边距：300px；
}
window.onload=function（）{
var-storageMousePositionX=0；
var-positionMouseX=0；
document.getElementById（“padre-relative”）.onmousemove=function（）{
positionMouseX=event.clientX；
如果（positionMouseX>storageMousePositionX）{
控制台日志（“右”）；
}
if（positionMouseX
您的问题是您正在将
storageMousePositionX
初始化为0，因此您的
onmousemove
处理程序第一次启动时，
事件。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;
    };

};

window.onload=function（）{
var storageMousePositionX=-1；
document.getElementById（“padre-relative”）.onmousemove=function（）{
var positionMouseX=event.clientX；
如果（storageMousePositionX>-1）{
如果（positionMouseX>storageMousePositionX）{
控制台日志（“右”）；
}
if（positionMouseX
您的问题是您正在将
storageMousePositionX
初始化为0，因此您的
onmousemove
处理程序第一次启动时，
事件。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;
    };

};

window.onload=function（）{
var storageMousePositionX=-1；
document.getElementById（“padre-relative”）.onmousemove=function（）{
var positionMouseX=event.clientX；
如果（storageMousePositionX>-1）{
如果（positionMouseX>storageMousePositionX）{
控制台日志（“右”）；
}
if（positionMouseX
这是因为您在加载时将var storageMousePositionX设置为0。您应该在输入div时首次设置它

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

这是因为您在加载时将var storageMousePositionX设置为0。您应该在输入div时首次设置它

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

哦，天啊，这很奇怪，我做了同样的事情，但它不起作用：）哦，天啊，这很奇怪，我做了同样的事情，但它不起作用：）