如何使用 jQuery 获取相对于目标元素的准确鼠标点击坐标？-css教程-PHP中文网

使用 jQuery 了解目标元素上的鼠标单击坐标

问题诊断

了解位置属性

示例演示

首页

web前端

css教程

如何使用 jQuery 获取相对于目标元素的准确鼠标点击坐标？

Mary-Kate Olsen

Dec 05, 2024 pm 10:51 PM

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

使用 jQuery 了解目标元素上的鼠标单击坐标

使用 jQuery 处理 HTML 元素上的单击事件时，了解如何准确检索鼠标坐标至关重要相对于目标元素的指针。让我们通过详细的示例来探讨和阐明这个主题。

问题诊断

考虑以下事件处理程序：

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

登录后复制

目标是获取鼠标指针相对于单击时的#seek-bar 元素。但是，提供的代码可能会产生不正确的结果。

了解位置属性

1. event.pageX, event.pageY:

这些属性提供鼠标指针相对于整个文档的坐标。

参考： http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2. offset():

此函数返回元素在其包含文档中的偏移位置（距页面左上角的距离）。

参考： http://api.jquery.com/offset/

3. position():

此函数返回元素在其包含文档中的位置（相对于其父元素）。

参考： http://api .jquery.com/position/

要解决最初的问题，考虑这些位置属性及其预期用途至关重要。在这种情况下，要获取鼠标指针相对于 #seek-bar 的位置，我们应该使用 offset() 函数而不是 offsetLeft。

更正的代码：

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

登录后复制

示例演示

为了说明这些位置属性之间的差异，这里有一个示例 HTML 代码段和相应的 JavaScript 代码：

HTML

<body>
   <div>

登录后复制

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));
    });
});

登录后复制

通过点击这些 div，您可以根据所使用的位置属性观察不同的结果。

以上是如何使用 jQuery 获取相对于目标元素的准确鼠标点击坐标？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn