브라우저에서 버튼의 좌표를 가져 오는 방법은 무엇입니까?

Question

예를 들어 좌표를 가져 오는 방법을 찾고 있습니다. 브라우저의 버튼. 미리 감사드립니다.

Answer 1

브라우저에서 버튼의 좌표를 가져 오려면 먼저 좌표를 찾으려는 특정 버튼을 가져 오는 선택기를 작성해야합니다.

var button = document.querySelector('button') 

좌표를 얻으려면 좌표를 다른 요소를 참조하여 원하는지에 따라 다릅니다. 좌표가 자체 기준에 있다면, 그것은 당신이 예를 들어 윈도우와 같은 다른 요소에 참조를 가지고 싶다면, 당신은 재귀 때까지 버튼의 부모를 통과 할 수 간단

{left: 0, top: 0, bottom: button.offsetHeight, right: button.offsetWidth} 

로 될 것이다 윈도우에 도달했습니다.

var top = button.offsetTop; 
var left = button.offsetLeft; 
var height = button.offsetHeight; 
var width = button.offsetWidth; 
while(button.offsetParent && button.offsetParent != window){ 
    button = button.offsetParent; 
    top += button.offsetTop; 
    left += button.offsetLeft; 
} 
var bottom = top + height; 
var right = left + width; 
return {left: left, top: top, bottom: bottom, right: right} 

Answer 2

버튼의 좌표를 가져 오기 위해 다음 코드를 사용해야합니다. 여기

<input type="button" id="button" value="display" onclick="getCoords()"> 
<script> 
    function getCoords() { 
     var mainEvent = event ? event : window.event; 

     alert("This button click occurred at: X(" + mainEvent.screenX + ") 
      and Y(" + mainEvent.screenY +  ")"); 
    } 
</script> 

은 작업 예입니다 http://jsfiddle.net/Bnuy7/1692/

의