How to get the mouse position coordinates with jQuery-HTML Knowledge-php.cn

How to get the mouse position coordinates with jQuery

藏色散人

Release： 2018-12-27 10:57:42

Original

13100 people have browsed it

jq obtains the current position coordinates of the mouse in real time, which can be achieved through the two attribute methods of jQuery event.pageX and event.pageY. jQuery event.pageX can be used to find the mouse position relative to the left edge of the document, and event.pageY can be used to find the mouse position relative to the top edge of the document.

How to get the mouse position coordinates with jQuery

Now we will introduce to you the jq method of obtaining the position coordinates of the mouse based on specific code examples.

The code example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jq获取鼠标位置坐标示例</title>
    <style type="text/css">
 *{
            margin: 0;
 }
        html, body{
            height:100%;
 }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
 $(function() {
            $("body").mousemove(function(event){
                var relPageCoords = "(" + event.pageX + "," + event.pageY + ")";
 $(".mouse-cords").text(relPageCoords);
 });
 });
 </script>
</head>
<body>
<p>当前鼠标的坐标为： <strong class="mouse-cords"></strong></p>
</body>
</html>

Copy after login

mousemove()The method indicates that when the mouse pointer moves in the specified element, the mousemove event will occur or when the mousemove event occurs. function to run. (In the above code, the parameter event of the function is equivalent to an object, used to provide mouse position information.)

event.pageX property returns the position of the mouse pointer, relative to the left side of the document edge. event.pageY Property returns the position of the mouse pointer, relative to the top edge of the document.

text() method sets or returns the text content of the selected element. (The strong tag here is used to display the output mouse coordinate value)

The effect is as follows:

How to get the mouse position coordinates with jQuery

## Note:

1. The event.pageX and event.pageY properties are usually used together.

2. When the user moves the mouse one pixel, a mousemove event will occur. Handling all mousemove events consumes system resources. Please use this event with caution.

This article is about jq’s method of obtaining the current position coordinates of the mouse in real time. It is very simple and easy to understand. I hope it will be helpful to friends in need!

The above is the detailed content of How to get the mouse position coordinates with jQuery. For more information, please follow other related articles on the PHP Chinese website!