這個javascript腳本有什麼問題？

-2

可能重複：
Why is this not working ? pushing a box using mouse pointer 這個javascript腳本有什麼問題？

這是一個腳本中使用鼠標指針推一個盒子，當盒子被從左邊推它纔會工作。

我已經創建了一個數組來獲取鼠標指針的位置，並確定它是否向左或寫入。

這是我迄今爲止工作的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);

來源

2012-07-22 Rafael Adel

修改'Object.prototype'是*** *** BAD。 ** B A D **。它打破了jQuery的例子，也沒有使用'obj.hasOwnProperty（key）'檢查的'for（var key in obj）'迭代的任何'（在假設環境是健全的情況下遍歷純對象時不需要） – ThiefMaster 2012-07-22 19:46:00

與你問的最後兩個問題有什麼不同？ http://stackoverflow.com/questions/11601419/trying-to-write-a-script-to-push-a-box-using-mouse-pointer-in-javascript和http://stackoverflow.com/questions/ 11594680 /爲什麼這是不工作推箱子使用鼠標指針 – j08691 2012-07-22 19:46:59

@Rafael，我認爲你需要一個加號在那裏像這樣'var pageXLeft = window.innerWidth + e.pageX ;' – 2012-07-22 19:47:43

問題就出在兩個地方：

你不應該同時設置左右兩個CSS屬性，這會混淆應該指定位置的瀏覽器。如果您設置了一個，請將另一個設置爲null。
見下

我的評論我也稍作修改你的腳本改編[0]和改編[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; 
}

來源

2012-07-22 20:00:01

嗯，它的一半是這樣，但是當你改變方向時會出現一些奇怪的行爲[見本]（http://jsfiddle.net/BFQvn/2/） – 2012-07-22 20:33:38

我不確定你對這個奇怪行爲的意思，你能詳細解釋一下嗎？一部分奇怪的行爲來自檢測到「推」，並不檢查光標是否位於盒子的同一垂直位置。因此，即使在頁面底部，光標也可以「虛擬」推動框。 – 2012-07-22 20:37:46

這個javascript腳本有什麼問題？

回答

相關問題