What's wrong with this javascript script? [duplicate]

问题

Possible Duplicate:
Why is this not working ? pushing a box using mouse pointer

This is a script to push a box using mouse pointer and it only work when the box is pushed from the left.

I've made an array to take positions of the mouse pointer and determine if it's going left or write.

Here's a working example of what i got so far.

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

回答1:

Problem lies in two places:

You should not set both css attribute left and right at the same time, this would confuse the browser which should dictate the location. If you set one, set the other to null.
See my comment below

I also slightly revised your script as arr[0] and arr[1] are not easy to read as they don't convey what they are, so I assign a variable to the array values for better readability.

Happy pushing.

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

来源：https://stackoverflow.com/questions/11603411/whats-wrong-with-this-javascript-script

标签

javascript

javascript-events

mouseevent

mouseover