Попытка идентифицировать относительное значение координаты x и y с кликом и смещения родительского контейнера, чтобы найти истинное значение, на которое была нажата мышь веб-страницу.Попытка получить точные значения щелчка мыши x и y pos - получение NaN
Проблема: я показываю NaN как x и y на экране? Не знаете почему?
// get the position of click
function getPosition(el) {
var xPosition = 0;
var yPosition = 0;
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",
};
}
function handleClick(event) {
// Return the current element clicked on
var el = event.currentTarget;
// Return the offset values of the element clicked on
var relOffsetValues = getPosition(el);
// Get the clicked values that is relative to the element
var valuesRelToClickedElementX = event.ClientX;
var valuesRelToClickedElementY = event.ClientY;
// Find the true value of x and y by adding the offset and the to clicked value of x and y
var realValueX = relOffsetValues.x + valuesRelToClickedElementX;
var realValueY = relOffsetValues.y + valuesRelToClickedElementY;
// display the x and y of the mouse click
alert("x:" + realValueX + ", y:" + realValueY);
}
// Set up event handlers according to standards
window.addEventListener("load", function(){
document.addEventListener("click", handleClick);
});
Может быть, это потому, что Clientx/у должна начинаться со строчной с. clientX/clientY. –
Исправлено. Все еще получая NaN – Shaz