пытается распечатать мышь x и y pos на экране - получение 0,0

Question

Когда пользователь нажимает на любом месте веб-сайта, я хочу зарегистрировать мышь x и y pos и хочу распечатать его.

ПРОБЛЕМА: Он печатает 0, 0 позиций КАЖДЫЙ раз.

эта функция получает положение х и у

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

} 

функция OnLoad

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

}; 

ОБНОВЛЕНИЕ НА ОСНОВЕ ОТВЕТА

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

} 

Я должен был определить el используя event.currentTarget .. однако я получаю NaN ошибку. Нет уверенности. Пожалуйста помоги!

Answer 1

У вас есть несколько синтаксических и свойств ошибки:

Изменить: document.onclick = onClickDo(event); к: document.onclick = onClickDo;

Вы не пропустите событие в функции обработки событий. Это происходит автоматически. И, как ваш код написан, 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); 
 
}