Jquery Mouse Click Position

Jquery Mouse Click Position

Jquery ouse Click Get Coordinates.

You may want to track the position of mouse as soon as it clicks on html element. Here we will see how to get co-ordinates of mouse when user clicks on div element.

HTML Source

<div>
           <div id="div1" style="height: 500px; width: 600px; background-color: Red">
               Click inside this div to get co-ordinates.
               <label id="label1">
               </label>
           </div>
</div>

Tracked position of mouse click will be displayed in label control.

Jquery to get mouse coordinates.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script>
      
      $(document).ready(function(){
      
            $("#div1").click(function(e){
            
            var coordinates = "x:"+e.pageX + " y:"+e.pageY;
            
             $("#label1").text(coordinates);
      
            });
      
      });    </script>

Little modification in above script can let you track continuous position of mouse. In above example we will attach mousemove event to div and when user moves mouse over div, we will display the coordinates.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script>
      
      $(document).ready(function(){
      
            $("#div1").mousemove(function(e){
            
            var coordinates = "x:"+e.pageX + " y:"+e.pageY;
            
             $("#label1").text(coordinates);
      
            });
      
      });
      
    </script>

Tags:

Learning JqueryBasics of jqueryHow To Hide Div On Click Using JQueryJQuery SlideJQuery Change Div background Color and Text Color On ClickJQuery On Click Change Div ContentJquery image click eventJQuery Hyperlink ClickJquery Table Row Highlight On MouseoverJquery button click eventJquery Trim String

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.