1

When a user clicks anywhere on the website, I want to register the mouse x and y pos and want to print it out.

PROBLEM: It prints out 0, 0 positions EVERY time.

this function gets the position of x and 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",
  };
}

on click event handler

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 function

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

};

UPDATE BASED ON ANSWER

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

 }

I had to define el using event.currentTarget.. however I am getting NaN error. No SURE. Please help!

Shaz
  • 1,443
  • 1
  • 27
  • 67

1 Answers1

0

You have several syntax and property errors:

Change: document.onclick = onClickDo(event); to: document.onclick = onClickDo;

You do not pass the event to the event handling function. That happens automatically. And, the way your code is written, onClicDo is being invoked immediately instead of waiting for a click event.

Also, event.CurrentTarget should be: event.currentTarget and el.tagName should be: el.nodeName

Here's a very scaled down version to show the basic set up.

// 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);
}
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • "onClicDo is being invoked immediately instead of waiting for a click event" - I understand that is the problem. What is the solution any ideas? – Shaz Feb 21 '17 at 23:25
  • @Shaz I already gave you the solution, change the code as I have specified. – Scott Marcus Feb 21 '17 at 23:29
  • So i believe event.offsetX is relative to the parent and hence won't give me the correct cords. In the handlerClick function I made the following change. Please see the updated code in the answer. Help! – Shaz Feb 21 '17 at 23:50
  • @Shaz I only used those to show you an example of how to successfully get coordinates out of the event. There are a variety of other properties you can use to get more precise coordinates should you need them. All you have to do is substitute those properties for the ones I've shown. – Scott Marcus Feb 22 '17 at 00:15
  • The goal is to store all the click cords to database and then download the webpage in memory, take a screenshot, and display the clicks over the heat map. For this, will event.offsetX give me the precise coordinates... since i have to take into consideration fixed widths, fluid, and elements are relative to parent: http://stackoverflow.com/questions/2496267/recording-user-data-for-heatmap-with-javascript – Shaz Feb 22 '17 at 00:40