How to get mouse click position in an HTML page

Question

I am trying to get the x and y position of mouse click in HTML file . The positions should be according to the size of html page and Mouse click can be done anywhere on the html page . How is this possible?

Answer 1

Look at this example:

function handleEvent(e){
 var evt = e ? e:window.event;
 var clickX=0, clickY=0;

 if ((evt.clientX || evt.clientY) &&
     document.body &&
     document.body.scrollLeft!=null) {
  clickX = evt.clientX + document.body.scrollLeft;
  clickY = evt.clientY + document.body.scrollTop;
 }
 if ((evt.clientX || evt.clientY) &&
     document.compatMode=='CSS1Compat' && 
     document.documentElement && 
     document.documentElement.scrollLeft!=null) {
  clickX = evt.clientX + document.documentElement.scrollLeft;
  clickY = evt.clientY + document.documentElement.scrollTop;
 }
 if (evt.pageX || evt.pageY) {
  clickX = evt.pageX;
  clickY = evt.pageY;
 }

 alert (evt.type.toUpperCase() + ' mouse event:'
  +'\n pageX = ' + clickX
  +'\n pageY = ' + clickY 
  +'\n clientX = ' + evt.clientX
  +'\n clientY = '  + evt.clientY 
  +'\n screenX = ' + evt.screenX 
  +'\n screenY = ' + evt.screenY
 )
 return false;
}

Live Demo

Answer 2

Try this:

$('div.container').on('click',function(event){
    $('div.result').html("X:"+event.pageX+" Y:"+event.pageY); 
       });

Working Fiddle: http://jsfiddle.net/TY75A/3/

Answer 3

With this.

addEventListener('mousedown', foo, false);

    function foo(e) {
        console.log(findPos(this));
    }
    function findPos(obj) {

        var curleft = 0, curtop = 0;
        if (obj.offsetParent) {
            do {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
        }
        return undefined;
    }

Answer 4

Try this :

$(document).ready(function() {
    $('img').click(function(e) {
    var offset = $(this).offset();
    alert(e.clientX - offset.left);
    alert(e.clientY - offset.top);
  });
});