使用jQuery如何获取目标元素上的单击坐标

javascript jquery html css jquery-ui

2022-08-30 05:16:17

我有以下用于我的html元素的事件处理程序

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

我需要在单击时在#seek栏上找到鼠标的位置。我本来以为上面的代码应该工作，但它给出了不正确的结果

答案 1

您是否正在尝试获取鼠标指针到元素（或）的位置，只是鼠标指针位置

试试这个演示：http://jsfiddle.net/AMsK9/relative

编辑：

1），给你鼠标位置相对文档！event.pageXevent.pageY

编号： http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2）：它给出了元素的偏移位置offset()

编号： http://api.jquery.com/offset/

3）：它给你一个元素的相对位置，即，position()

将一个元素嵌入到另一个元素中

例如：

<div id="imParent">
   <div id="imchild" />
</div>

编号： http://api.jquery.com/position/

断续器

<body>
   <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>
   <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>
   <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>

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

答案 2

$('#something').click(function (e){
    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;
    var yPos = e.pageY - elm.offset().top;

    console.log(xPos, yPos);
});