Mouse click coordinated with .text()

JavaScript
1

Hi,
I am trying to get the x,y coordinated on an image when the mouse is clicked. I understand that the object ‘event’ has proerties for the coordinates, event.pageX and event.pageY. I am then trying to pass or return these values when the mouse is clicked to text()

Here is the html

 <!DOCTYPE html>
<html>
<head>
    <title>Find the buried treasure</title>
</head>
<body>
    <h1 id="heading">Find treasure</h1>
    <img id="map" width=400 height=400 src="http://nostarch.com/images/treasuremap.png">
    <p id="position"></p>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>            
    <script src="/lilegibney/jsscripts/treasure.js"></script> 
</body>
</html>

the js file is,

var getPos = function(event) {
    var xpos = event.offsetX;
    var ypos = event.offsetY;
    return [xpos, ypos];
};
    $("#map").click(function(event){
        var position = getPos();
        $("#position").text(position[0]);//just one coordinate for the moment
    });

The site is here

The error message is,

TypeError: event is undefined

So clearly there is a problem with how i am trying to use the click event.

Thanks,

Shane

2

Shouldn’t you be passing the event to the function? ( var position = getPos(event):wink:

i.e.

 $("#map").click(function(event){
        var position = getPos(event);
        $("#position").text(position[0]);//just one coordinate for the moment
    });
3

Hi,
Thanks, that got rid of the error but still not displaying the x-coordinate.

var getPos = function(event) {
    var xpos = event.offsetX;
    var ypos = event.offsetY;
    return [xpos, ypos];
};
    $("#map").click(function(event){
        var coordinate = getPos(event);
        $("#position").text(coordinate);
    });

I changed the position variable name to coordinate iun case there was a clash with it an the if #position.

Thanks,
Shane

4

It works in Chrome but apparently offsetX and Y are not cross browser friendly.

You need this.

var getPos = function(event) {
var xpos = event.offsetX;
var ypos = event.offsetY;
	if(typeof event.offsetX === "undefined" || typeof event.offsetY === "undefined") {
		var targetOffset = $(event.target).offset();
		event.offsetX = event.pageX - targetOffset.left;
		event.offsetY = event.pageY - targetOffset.top;
			xpos = event.offsetX;
		ypos = event.offsetY;
	}		
return [xpos, ypos];
	};
$("#map").click(function(event){
    var position = getPos(event);
    $("#position").text(position[0]);//just one coordinate for the moment
});
5

That works thanks.
But what is event.target? Is this 0,0 ?
Why does the y-coordinate have so many decimal places, when the x-coordinate has none?
Thanks,
Shane

6

I guess that’s just browser differences again as chrome doesn’t seem to do this.

You can just round it to a whole number anyway.

xpos = Math.round(event.offsetX);
ypos = Math.round(event.offsetY);
1 Like
7

It’s a DOM element object where event is occured
In your case $(event.target) equals to $('#map')

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.