Get Mouse Position using JQuery

Sun Jan 06, 2013 1:40 am

Get mouse position , mouse click position.
javascript code

<html>
<head>
<title>Get Mouse Position- Mouse Over</title>

<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<script>
 $(document).ready(function(){
 var startMousePos = { x: -1, y: -1 };
  var endMousePos = { x: -1, y: -1 };
 var MousePos={ x: -1, y: -1 };
  
 $(document).bind('mousemove',function(e){ 
        $("div#info2").text(" Mouse pageX: " + e.pageX + ",  MousepageY: " + e.pageY); 
		MousePos.x=e.pageX;
		MousePos.y = e.pageY;
		  
}); 
$('p#text').mousedown(function(){
    jQuery(function(event) {
   
        startMousePos.x = MousePos.x;
        startMousePos.y = MousePos.y;
		 $("div#infox").html("<br/>startMousePos.x=("+startMousePos.x
		 +")startMousePos.y=("+startMousePos.y+")");
 

    
});
});
$('p#text').mouseup(function(){
        jQuery(function(event) {
        endMousePos.x = MousePos.x;
        endMousePos.y =  MousePos.y;
		 $("div#infoy").html(",endMousePos.x=("+endMousePos.x
		 +")endMousePos.y=("+endMousePos.y+")");
 
});
});
});
$('p#text').mouseover(function() {
  $('#info2').append('<div>Handler for .mouseover() called.</div>');
});

</script>
</head>
<body>
 <p  id="text"> Mouse Over on this text , press on this text </p>

 
<div id="infox" ></div><br>
<div id="infoy" ></div><br>
<div id="info2" ></div>
</body>
</html>

Get Mouse Position using JQuery

Get Mouse Position using JQuery

Topic Tags