JavaScript: Get Mouse Coordinates on Mouse Click

http://learnwithcrypters.com/javascript-basics
JavaScript: Get Mouse Coordinates on Mouse Click

You can get the x and y coordinates of where you clicked on your screen using JavaScript. We use the event object to get clientX and clientY values. In this tutorial, we will move an image to the position where we click.

http://learnwithcrypters.com/javascript-basics

---

Closed Caption:

Do you know how to get the position
that is the x and y coordinates on a
mouse click. The client x
and the client y of event object
returns the horizontal and vertical
coordinate values.
So you can get the position
that is the X and y coordinates using the event object.
The event model is handled
differently in Internet Explorer and other
w3c compliant browsers such as Firefox
Google Chrome etc. In Internet
explorer
there is an explicit window dot event object
which we will use to get the position
whereas
in w3c compliant browswers an
inexplicit event object is passed to the
function.
So in this tutorial, we will go for a
genetic solution
that will work for any browser. Let me
create a new HTML file
and I'm going to change the title, get mouse coordinates
Next let me create a div element
to display the result. div
id is equal to result. Next I am going to add
that script section.
script type is equal to
text or JavaScript. We are going to write
the code in such a way that
as soon as the page is loaded, we will display the
position of the mouse click
when the mouse is clicked. So window dot onload
equal to function
OK. Next we have to write the
function for the on click event. So
window
dot on click is equal to function
As I have already mentioned we are going
to implement a genetic solution
So for the
w3c compliant browsers, we need to pass
the
inexplicit event object, that is let me
name it as
e and var
evt is equal to we will get
e if it is an W3C compliant browser, that is Firefox Google Chrome etc.
Otherwise we need to pass the
event object explicitly, that is the window dot
event or
it will be e.
This way we are going for a generic solution,
e will be taken if the browser
used is Google Chrome or Firefox
and window dot event will be taken if the
browser used is internet explorer. Now
we
need to display the result. So
document
dot get element by id
result dot innerhtml
is equal to, let us display the value as mouse position
OK? and within brackets
let us display the value. So opening
braces, then
we need to display the x value,
x position that is evt dot
client X will return the x value.
Then I want to have a comma
comma plus
again I want to display the y value, that is evt dot clienty
OK? we need to close this
opening braces. So inside double quotes
bracket. ok>
Let me save this file. File, save.
Let me save it on my desktop, let me name it as position.
Save. I have
taken it here. Right click open with
google chrome. Now you will not see anything
as soon as we click on the screen
you're getting the mouse position, see
I have clicked here, the x value is 149
and the y value is seventy. Again clicking
the value is changing
OK? To see the change clearly
let us reposition an image
to the location where we click on the
screen. So for that, let me
add and image img
src is equal to see
I have downloaded an image of a flower
and its name is
rose dot jpeg. So
img src rose dot jpeg.
Then we are
going to use CSS to change the position
S style is equal to
let me first position it to absolute
and for the time being let me
position it at 100 px
top 100 left 100
OK? Let me close the
image tag and file save
go back here refresh
see I'm able to see the image at the 100
position. Next what we are going to do? We will change the position of the
element
to where we click on the screen. So here
document dot getelementbyid
oh sorry I have not
added the id. Let me add an ID here. id is
equal to myimage. OK?
so here it will be myimage.
dot style
dot left will be the client
X value that is evt dot clientx
and document dot getelementbyid
myimage dot style
dot top will be evt
dot clienty value. Save the file
and see whether it is working
See let me click here, oh it is not
working
Let me see the code. ok I figured it out
i havent added px. px
here as well px. So go to
File, Save, refresh
click, see it has been repositioned to
where I'm clicking on my screen
Now it is 114, 89
112 57. Let me click over here.
see it is 365 59.
617 60
wherever you click the image will be
changed to that position. Make sure that
you
take an image which is completely filled at least on this side
if it is white color on this side, you will not be able to see whether it is
working or not.
Here you could see that the image is getting
repositioned. Hope this makes it clear
how you can
get the position of mouse click using
the
event object. Thank you