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

【问题标题】：Using jQuery how to get click coordinates on the target element使用jQuery如何获取目标元素上的点击坐标
【发布时间】：2011-03-15 04:19:51
【问题描述】：

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

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

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

【问题讨论】：

相对于元素、视口还是整个文档的位置？
我使用 e.layerX - e.target.offsetLeft 让它工作，而 Oprea 只使用了 e.offsetX
如果您希望在响应式网站上获取它。试试这篇文章，你也可以在响应式网站上得到它。 kvcodes.com/2014/03/…
e.offsetX 似乎也适用于 Firefox 和 Chrome。根据jQuery page，它被复制但未规范化。

标签： javascript jquery html css jquery-ui

【解决方案1】：

看这里enter link description here

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

百分比：

$('.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+'%');
});

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

您是否试图将鼠标指针relative 的位置简单地获取到元素（或）鼠标指针位置

试试这个演示：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));
    });
});

【讨论】：

+1 示例...虽然我还会在此处添加代码，但如果您的链接死了，这个问题将来会变得无用，我会为每个和一个这里有简要说明:)
'#B' 的情况有一个更简单的方法：e.offsetX 和e.offsetY。我猜你想编辑它。我已经更新了小提琴here。多亏了这篇文章，我找到了这个解决方案，所以谢谢。
谢谢，因为我个人混淆了 offset() 和 position()，任何需要进一步说明的人可以阅读stackoverflow.com/questions/3202008/… 方便起见
我有一个元素固定在底部 - 那是 100% 的宽度，所以我使用窗口宽度作为 posX - 所以我能够确定用户是否点击了一个“X”使用 :after 位于右上角的 css 规则。
很好的例子，但是 .position() 和 .offset() 之间的区别并不明显。您应该将元素#C 包装在一些具有示例性位置的父 div 中，以查看单击 #C 会返回您在 #C 的父元素内的鼠标位置，这可能是最不常用的。

【解决方案6】：

试试这个：

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

在这里您可以找到更多 info 的 DEMO

【讨论】：