0

For modern browsers (IE 10+, FF, Safari, Chrome): It looks like you would have to use the facade pattern to build a consistent interface and do a lot of fiddling using this info.

I'm looking for a simple modern way to determine the x, y coordinates of where a user clicked in a div and use those coordinates to position a pie menu as determined in this SO Question.

No libraries unless used to show concept.

Reference

What is the difference between screenX/Y, clientX/Y and pageX/Y?

Here is a google hit that shows 3 different event properties

Community
  • 1
  • 1

2 Answers2

1

You could try

element.onclick = function(e) {
  var x = e.pageX - element.offsetLeft // the absolute x position
                                       // minus the element's absolute x position
  var y = e.pageY - element.offsetTop
  alert('x : ' + x + ', y : ' + y)
}

Here is a fiddle

tckmn
  • 57,719
  • 27
  • 114
  • 156
1

the following will give you the coordinates for any div clicked in the page; for a specific div replace 'div' with '#yourDivId'

$(document).ready(function(){   
   $('div').click(function(e){
       var x = e.pageX; 
       var y = e.pageY;
       alert(...);
   });
});