Detect Mouse click location

Question

What i am trying to achieve is make a DIV and display world map image on it or as a background.. & when user clicks some somewhere on the map, i catch the mouse-click location,

then i am some how going to translate the mouse's X,Y cords into longitude,latitude and then run an AJAX to display some data.

My problem is:

How to get mouse click location with JavaScript
How to translate the global click location into a DIV's relative X,Y coords of a layer

score 4 · Accepted Answer · edited May 23 '17 at 12:01

4

Look at this example:

Click image and get coordinates with Javascript

Following posts may also help:

edited May 23 '17 at 12:01

Community

1
1

answered May 27 '11 at 16:10

Naveed

40,370
32
94
130

score 3 · Answer 2 · answered May 27 '11 at 16:12

In HTML you set onMouseMove event:

<div onMouseMove="getPositions();"
style="width:200px;height:100px"></div>

And javascript function:

function getPositions(ev) {
if (ev == null) { ev = window.event }
   _mouseX = ev.clientX;
   _mouseY = ev.clientY;
}

score 1 · Answer 3 · answered May 27 '11 at 16:13

1

Unless you have a reason to do it from scratch, I would recommend Google Maps Api.

You'll notice that the Map object has a click event to which you can bind a callback that receives a MouseEvent that contains lat/long coords. Check out this example.

answered May 27 '11 at 16:13

mgalgs

14,391
9
59
63

score 0 · Answer 4 · answered May 27 '11 at 16:13

In the event handler you can get it through the mouseEvent Args.

Excerpt from http://msdn.microsoft.com/en-us/library/bb404721.aspx -

function onMouseLeftButtonUp(sender, mouseEventArgs)
{
    // Return a Point object representing the x- and y-coordinates of the current mouse position
    // relative to the reference object.
    var pt = mouseEventArgs.getPosition(sender.findName("referenceObject"));

    // Display the current mouse position.
    sender.findName("Status").text = pt.x + " : " + pt.y;
}

Detect Mouse click location

4 Answers4