화면에서 마우스 x 및 y 위치를 인쇄하려고합니다. 0

Question

사용자가 웹 사이트의 아무 곳이나 클릭하면 마우스 x 및 y 위치를 등록하고 인쇄하려고합니다.

문제 : 항상 0, 0 위치를 인쇄합니다.

이 함수는 클릭 이벤트 핸들러 x 및 y

// get the position of click 
function getPosition(el) { 
  var xPosition = 0; 
  var yPosition = 0; 
  
  while (el) { 
    if (el.tagName == "BODY") { 
      // deal with browser quirks with body/window/document and page scroll 
      var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft; 
      var yScrollPos = el.scrollTop || document.documentElement.scrollTop; 
  
      xPosition += (el.offsetLeft - xScrollPos + el.clientLeft); 
      yPosition += (el.offsetTop - yScrollPos + el.clientTop); 
    } else { 
      xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft); 
      yPosition += (el.offsetTop - el.scrollTop + el.clientTop); 
    } 
  
    el = el.offsetParent; 
  } 
  return { 
    x: xPosition, 
    y: yPosition, 
    a: "hahah", 
  }; 
} 

의 위치를 ​​얻는다

function onClickDo(event) { 

var el = event.CurrentTarget; 
var posOb = getPosition(el); 

for (var key in posOb) { 
     console.log(key); 
     } 
    alert(posOb.x + " x pos"); 
    alert(posOb.y+ " y pos"); 
    alert(posOb.a+ " random string"); 

} 

온로드 기능

window.onload = function() { 
    document.onclick = onClickDo(event); 

}; 

UPDATE 내가 그러나 내가 NaN 오류를 얻고있다 .. event.currentTarget를 사용하여 el을 정의했다

// Set up event handlers according to modern standards 
window.addEventListener("load", function(){ 
    document.addEventListener("click", handleClick); 
}); 

function handleClick(event) { 

  var xPosition = 0; 
  var yPosition = 0; 
 var el = event.currentTarget; <----------------------- targeting the element not working 

  while (el) { 
    if (el.nodeName == "BODY") { 
      // deal with browser quirks with body/window/document and page scroll 
      var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft; 
      var yScrollPos = el.scrollTop || document.documentElement.scrollTop; 
  
      xPosition += (el.offsetLeft - xScrollPos + el.clientLeft); 
      yPosition += (el.offsetTop - yScrollPos + el.clientTop); 
    } else { 
      xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft); 
      yPosition += (el.offsetTop - el.scrollTop + el.clientTop); 
    } 
  
    el = el.offsetParent; 
  } 
//   return { 
//     x: xPosition, 
//     y: yPosition, 
// a: "hahah", 
//   }; 


alert(xPosition + " x pos" + " and " + yPosition + " y pos"); 

} 

답변 기준으로합니다. 확실하지 않아. 도와주세요!

변경 : document.onclick = onClickDo(event);로 : document.onclick = onClickDo;

당신은 이벤트 처리 기능에 이벤트를 통과하지

Answer 1

당신은 몇 가지 구문과 재산 오류가 있습니다. 그것은 자동적으로 일어난다. 그리고 코드가 작성된 방식으로 onClicDo이 클릭 이벤트를 기다리는 대신 즉시 호출됩니다. 또한

, event.CurrentTarget은 다음과 같아야합니다 event.currentTarget 및 el.tagName가 있어야한다 :

el.nodeName 여기 기본적인 셋업을 보여주는 매우 축소 된 버전입니다.

// Set up event handlers according to modern standards 
 
window.addEventListener("load", function(){ 
 
    document.addEventListener("click", handleClick); 
 
}); 
 

 
function handleClick(event) { 
 
alert("x:" + event.offsetX + ", y:" + event.offsetY); 
 
}