이 자바 스크립트 스크립트의 문제점은 무엇입니까?

-2

가능한 중복은 :
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);

출처

2012-07-22 Rafael Adel

'Object.prototype'을 수정하는 것은 *** BAD ***입니다. ** B A D **. 예를 들어 jQuery와'obj.hasOwnProperty (key)'검사를 사용하지 않는'for (var obj in obj)'반복을 중단합니다 (환경이 정상이라고 가정 할 때 일반 객체를 반복 할 때 필요하지는 않습니다) – ThiefMaster

어떻게 생깁니 까? 네가 물었던 지난 두 가지 질문과 다른 점은 무엇입니까? http://stackoverflow.com/questions/11601419/trying-to-write-a-script-to-push-a-box-using-mouse-pointer-in-javascript 및 http://stackoverflow.com/questions/ 11594680/why-this-not-push-a-box-using-mouse-pointer – j08691

@Rafael, 이런 식으로 어딘가에 더하기 기호가 필요하다고 생각합니다. 'var pageXLeft = window.innerWidth + e.pageX ; ' –

문제가 두 위치에있다 :

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

글쎄, 절반 방법이지만, 당신이 courser 방향을 바꿀 때 어떤 이상한 행동이있다 [this this] (http://jsfiddle.net/BFQvn/2/) –

나는 당신이 이상한 행동에 어떤 의미인지 모르겠다. 더 자세히 설명해 주시겠습니까? 행동의 이상한 부분은 "밀기"감지로 인해 커서가 상자의 동일한 수직 위치에 있는지 확인하지 않습니다. 따라서 커서는 페이지 하단에있을 때에도 "사실상"상자를 밀 수 있습니다. –

이 자바 스크립트 스크립트의 문제점은 무엇입니까?

답변

관련 문제