Question

可能重复：
Why is this not working ? pushing a box using mouse pointer

这是一个使用鼠标指针推送盒子的脚本，只有当从左侧推动盒子时它才有效。

我已经制作了一个数组来获取鼠标指针的位置，并确定它是向左还是写入。

这是我迄今为止所做的工作example。

index.js

<html>
    <head>
        <title>Chase the box</title>
        <style>
            body {
            }

            .css-box{
                position: absolute ;
                top:20px;
                width : 100px;
                height : 100px;
                background-color : blue;
            }

            .css-textbox{
                margin-top: 500px;
            }

        </style>
    </head>

    <body>
        <div id="box" class="css-box"></div>
        <div class="css-textbox">            
            <p>All : <input id="allTextbox" type="text"></input></p>
            <p>Left : <input id="leftTextbox" type="text"></input></p>
            <p>Right : <input id="rightTextbox" type="text"></input></p>
            <p>e.pageX(Left) : <input id="pageXTextbox" type="text"></input></p>
            <p>e.pageX(Right) : <input id="pageXRightTextbox" type="text"></input></p>
        </div>
        <script type="text/javascript" src="script.js"></script>
    </body>

</html>

的script.js

var box = document.getElementById("box");
var allTextbox = document.getElementById("allTextbox");
var leftTextbox = document.getElementById("leftTextbox");
var rightTextbox = document.getElementById("rightTextbox");
var pageXTextbox = document.getElementById("pageXTextbox");
var PageXRightTextbox = document.getElementById("pageXRightTextbox");

Object.prototype.offsetRight = null;

var arr = [];
var pushBox = function(e){
    var pageXRight = window.innerWidth - e.pageX;
    box.offsetRight = window.innerWidth - (box.offsetWidth + box.offsetLeft);

    if(arr.length < 2){
        arr.push(e.pageX);
    } else {            
        if(arr[0] < arr[1]){
            if(e.pageX >= box.offsetLeft){
                box.style.left = e.pageX + "px";
            }
        } else if(arr[0] > arr[1]){
            if(pageXRight >= box.offsetRight){
                box.style.right = pageXRight + "px";
            }
        }

        arr.shift(arr[0] , arr[1]);        
    }

    allTextbox.value = window.innerWidth;
    leftTextbox.value = box.offsetLeft;
    rightTextbox.value = box.offsetRight;
    pageXTextbox.value = e.pageX;
    pageXRightTextbox.value = pageXRight;
}


document.addEventListener("mousemove" , pushBox);

Answer 1

问题出在两个地方：

你不应该同时左右设置css属性，这会混淆应该指定位置的浏览器。如果设置了一个，则将另一个设置为空。
请参阅下面的评论

我还稍微修改了你的脚本，因为arr [0]和arr [1]不容易阅读，因为它们没有传达它们是什么，所以我为数组值分配一个变量以便更好地阅读。

快乐推动。

var pushBox = function(e){
    var pageXRight = window.innerWidth - e.pageX;
    box.offsetRight = window.innerWidth - (box.offsetWidth + box.offsetLeft);

    if(arr.length < 2){
    arr.push(e.pageX);
    console.log(JSON.stringify(arr));
    } else {

    var previousX = arr[0];
    var newX = arr[1];

    if(previousX < newX){
                // add e.pageX <= box.offsetRight to ensure that mouse appearance to the right of the box would not push the box
        if(e.pageX >= box.offsetLeft && e.pageX <= box.offsetRight){
        box.style.right = null;
        box.style.left = e.pageX + "px";
        }
    } else if(previousX > newX){
        if(pageXRight >= box.offsetRight){
        box.style.left = null;
        box.style.right = pageXRight + "px";
        }
    }

    arr.shift(arr[0] , arr[1]);        
    }

    allTextbox.value = window.innerWidth;
    leftTextbox.value = box.offsetLeft;
    rightTextbox.value = box.offsetRight;
    pageXTextbox.value = e.pageX;
    pageXRightTextbox.value = pageXRight;
}

这个javascript脚本有什么问题？

1 个答案: