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

Question

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

118

我有一个针对HTML元素的事件处理程序：

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

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

- Roman

4

相对于元素、视口还是整个文档的位置？ - James

我使用 e.layerX - e.target.offsetLeft 让它工作，对于 Opera 只需使用 e.offsetX。 - Roman

如果您想在响应式网站上获取内容，请查看此文章。http://www.kvcodes.com/2014/03/get-exact-top-left-position-mouse-pointer-location-using-jquery/ - Kvvaradha

e.offsetX 在 Firefox 和 Chrome 上似乎也能工作。根据 jQuery 页面的说明，它被复制但未经过标准化处理。 - Ale

6个回答

19

$('#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);
});

- Nisar

3

试试这个：

jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})

在这里，您可以找到更多信息和演示。

- Krunal

1

如果你的浏览器支持MouseEvent.offsetX（实际上所有主流浏览器都支持），jQuery Event object 将包含这个属性。

MouseEvent.offsetX 只读属性提供了鼠标指针在事件和目标节点的填充边缘之间的 X 坐标偏移量。

$("#seek-bar").click(function(event) {
  var x = event.offsetX
  alert(x);    
});

- Memet Olsen

1

以百分比表示：

$('.your-class').click(function (e){
    var $this = $(this); // or use $(e.target) in some cases;
    var offset = $this.offset();
    var width = $this.width();
    var height = $this.height();
    var posX = offset.left;
    var posY = offset.top;
    var x = e.pageX-posX;
        x = parseInt(x/width*100,10);
        x = x<0?0:x;
        x = x>100?100:x;
    var y = e.pageY-posY;
        y = parseInt(y/height*100,10);
        y = y<0?0:y;
        y = y>100?100:y;
    console.log(x+'% '+y+'%');
});

- l2aelba

0

在这里看输入链接描述

HTML

<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>

css

#myPosition{
  background-color:red;
  height:200px;
  width:200px;
}

jQuery

$(document).ready(function(){
    $("#myPosition").click(function(e){
       var elm = $(this);
       var xPos = e.pageX - elm.offset().left;
       var yPos = e.pageY - elm.offset().top;
       alert("X position: " + xPos + ", Y position: " + yPos);
    });
});

- AirBlack

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user372551 · Accepted Answer

你想获取鼠标指针相对于元素的位置，还是仅获取鼠标指针的位置？

试试这个演示：http://jsfiddle.net/AMsK9/。它可能能帮到你。

编辑：

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()：它可以给出元素的相对位置，即一个元素嵌套在另一个元素中的情况。

示例：

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

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

HTML

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