javascript - Mapping mouse click coordinates on heatmap for different resolution & screen sizes in JS/Jquery -

i collect mouse click data webpage accessed on different resolutions & screen size devices , accurately map click coordinates on overlay displaying heatmap. how can in javascript/jquery? also, considering case when page being displayed can scrolled up/down , browser window resized anytime user changing relative positions of dom elements @ screen. example, have main div wrapper container of documents , 2 divs columns inside. normally, columns shown side side each other inside wrapper div. when user resizes page smaller size, column right move , sit under 1st column. so, x , y offset has changed according page. now, if user clicks on 2nd column, clicks won't map accurately screen when see heatmap on device in full page viewi'm beginner, need know details.

i working on same thing collect click coordinates plotted on heatmap. method used click coordinate , converting them pixel average relative document , when plotting again convert them coordinates.

window.addeventlistener("click",function(){      var posx = 0;     var posy = 0;     totalx = document.body.scrollwidth;      totaly = document.body.scrollheight;     if (!e) {         var e = window.event;     }     if (e.pagex || e.pagey) {         posx = e.pagex;         posy = e.pagey;     }     else if (e.clientx || e.clienty) {         posx = e.clientx + document.body.scrollleft + document.documentelement.scrollleft;         posy = e.clienty + document.body.scrolltop + document.documentelement.scrolltop;     }     console.log("x" + ((posx * 100)/totalx)); //just debugging     console.log("y" + ((posy * 100)/totaly)); // debugging     return {         x : ((posx * 100)/totalx),         y : ((posy * 100)/totaly)     };  }); 

the coordinates not found relative document work pretty in desktop clicks not mobile clicks. can put condition avoid mobile clicks or can record them differently.