CODEWITHSUNDEEP
javascript
user1637281
user1637281

Reputation:

Retreiving coordinates of a click inside a div for modern browsers?

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

Upvotes: 0

Views: 70

Answers (2)

user2377420
user2377420

Reputation:

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(...);
   });
});

Upvotes: 1

tckmn
tckmn

Reputation: 59283

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

Upvotes: 1

Related Questions