Mouse Position by event.positionX & event.positionY using JQUERY

We can get the position of the mouse from left side and from top edge of the screen by using event.positionX and event.postionY
event.postionX
Now let us try to develop code to display mouse position from left and top edge of the screen. We will keep this code inside a click event so once the user cliks any where in the page, the position of the Mouse is displayed.

Here is the code
<script>
$(document).ready(function() {

$(document).click(function(){
$("#t1").html('You  clicked at X position: '+event.pageX + " , Y position: "+event.pageY);
});

})
</script>
Here we have seen how the position is displayed on mouse click, same display we can attach to mousemove event so when we move the mouse the position is changed continuously.

In above examples we have seen position of mouse with respect to document. Now let us calculate position with respect to any other element. In our demo we have used HTML5 Canvas but you can use any other object or image. In this demo we still read the mouse position with respect to document but adjust the value by taking offset of the element. We can read the offset object like this
var offset = $(this).offset();
Based on this value we can calculate position of the mouse.
Your Rating




Post your comments , suggestion , error , requirements etc here .







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer