How to move mouse pointer to a specific position using JavaScript ?

How to get the Position of mouse pointer in jQuery ?

Last Updated : 31 Mar, 2021

In this article, we will see how to get the position of the mouse pointer using jQuery. To get the position of mouse pointer, event.pageX, and event.pageY property is used. The event.pageX property is used to find the position of the mouse pointer relative to the left edge of the document. The event.pageY property is used to find the position of the mouse pointer relative to the top edge of the document.

Syntax:

event.pageX
event.pageY

Here, we use on() method to attach one or more event handlers for the selected elements and the text() method to set or return the text content of the element

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to get the Position of
        mouse pointer in jQuery?
    </title>

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

    <script>
        $(document).ready(function () {
            $(document).on("mousemove", function (event) {
                $("#GFG").text("Mouse Position (" 
                + event.pageX + ", " + event.pageY + ")");
            });
        });
    </script>

    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>
        How to get the Position of
        mouse pointer in jQuery?
    </h3>

    <div id="GFG"></div>
</body>

</html>

Output:

How to move mouse pointer to a specific position using JavaScript ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to run a code on mouseenter event in jQuery ?

In this article, we will see how to run the code when the mouse enters into the specific area using jQuery. To run the code on a mouse enter a specific area, mouseenter() method is used. The mouseenter() method works when the mouse pointer moves over the selected element. Syntax: $(selector).mouseen

How to move mouse pointer to a specific position using JavaScript ?

In this article, we will learn how to move the mouse pointer to any specific position in the web browser using JavaScript. Before we start, you need to know that it's not actually possible to move the mouse pointer to a position using JavaScript, such functionality can be easily misused, but we can

How to get value of textbox in jQuery ?

The purpose of this article is to demonstrate how we can get the value of textbox using jQuery. A basic understanding of HTML, CSS, and jQuery is required. This can be done by using the jQuery val() method. val() Method: This method is used to set or return the value of the attribute for the selecte

How to create a Position popup using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a position popup using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€ hr

How to run code on mouseleave event in jQuery ?

In this article, we will see how to run the code when the mouse leaves into a specific area using jQuery. To run the code on a mouse leave into a specific area, the mouseleave() method is used. The mouseleave() method works when the mouse pointer leaves the selected element. Syntax: $(selector).mous

How to Map Mouse Position in CSS?

This article will describe how to map the position of the mouse on the web page using CSS. You can do this in CSS using:hover pseudo-class and custom properties that contain the relative position of the mouse and change accordingly with:hover.Approach: To map the position of the mouse, we will maint

How to validate position in jQuery ?

In this article, we will find how to validate position using jQuery position() method. The .position() method in jQuery returns the position of the first matched element relative to its parent element. Syntax: $(selector).position() Return value: Returns an object containing the properties top and l

How to change the position of background image using jQuery ?

In this article, we will see how to change the position of the background image using jQuery. To change the position of the background image, we will use css() method with float property.Â The css() method is used to change the style property of the selected element. The float property is used to cha

How to Get Selected Index on Mouseover in JavaScript ?

To obtain the selected index on mouseover in JavaScript, attach event listeners to the parent container and utilize iteration through child elements to discover the index of the hovered element. By tracking the index of the hovered element during this process, you can determine the selected index ac

How to change the position of the colorbox using jQuery ?

Colorbox is a jQuery plugin, it extends the jQuery library to include extra functionality. Approach: We can change the position of colorbox in jQuery using positional arguments such as top, left, right, bottom. Syntax: $(element).colorbox({ top: "Apx", left: "Bpx", right: "Cpx", bottom: "Dpx" }); Ex