How to Get Accurate Mouse Click Coordinates Relative to a Target Element Using jQuery?-CSS Tutorial-php.cn

How to Get Accurate Mouse Click Coordinates Relative to a Target Element Using jQuery?

Mary-Kate Olsen

Release： 2024-12-05 22:51:14

Original

670 people have browsed it

How to Get Accurate Mouse Click Coordinates Relative to a Target Element Using jQuery?

Understanding Mouse Click Coordinates on Target Elements Using jQuery

When handling click events on HTML elements with jQuery, it's essential to know how to accurately retrieve the coordinates of the mouse pointer relative to the target element. Let's explore and clarify this topic with detailed examples.

Issue Diagnosis

Consider the following event handler:

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - e.target.offsetLeft;
    alert(x); 
});

Copy after login

The goal is to obtain the mouse pointer's position relative to the #seek-bar element at the moment of the click. However, the provided code might deliver incorrect results.

Understanding Positional Properties

1. event.pageX, event.pageY:

These properties provide the mouse pointer's coordinates relative to the entire document.

Ref: http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2. offset():

This function returns the offset position (distance from the top-left corner of the page) of an element within its containing document.

Ref: http://api.jquery.com/offset/

3. position():

This function returns the element's position (relative to its parent element) within its containing document.

Ref: http://api.jquery.com/position/

To resolve the initial issue, it's crucial to consider these positional properties and their intended usage. In this case, to get the mouse pointer's position relative to the #seek-bar, we should utilize the offset() function instead of offsetLeft.

Corrected Code:

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - $(this).offset().left;
    alert(x); 
});

Copy after login

Example Demonstration

To illustrate the difference between these positional properties, here's an example HTML snippet and corresponding JavaScript code:

HTML

<body>
   <div>

Copy after login

JavaScript

$(document).ready(function (e) {

    $('#A').click(function (e) { //Default mouse Position 
        alert(e.pageX + ' , ' + e.pageY);
    });

    $('#B').click(function (e) { //Offset mouse Position
        var posX = $(this).offset().left,
            posY = $(this).offset().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });

    $('#C').click(function (e) { //Relative ( to its parent) mouse position 
        var posX = $(this).position().left,
            posY = $(this).position().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });
});

Copy after login

By clicking on these divs, you can observe the distinct results based on the positional property used.

The above is the detailed content of How to Get Accurate Mouse Click Coordinates Relative to a Target Element Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!