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

109

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

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

单击时，我需要在＃seek-bar上找到鼠标的位置。我以为上面的代码应该可以工作，但是结果不正确

— 罗曼
source

4

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

— 詹姆斯

我使用e.layerX-e.target.offsetLeft使其工作，而对于Oprea刚使用了e.offsetX

— 罗马

如果您希望将其放在响应网站上。尝试本文，您也可以在响应式网站上获得它。kvcodes.com/2014/03/...

— Kvvaradha

235

您是否要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));
    });
});

9

+1的示例...请注意，尽管我也会在此处添加代码，如果您的链接死了，这个问题在将来变得

— 不再有用

2

有一种更简单的方法来处理'#B'：e.offsetX和e.offsetY。我想您想编辑它。我已经在这里更新了小提琴。我通过帖子找到了这个解决方案，非常感谢。

— toto_tico

谢谢，因为我个人对offset（）和position（）感到困惑，因此任何需要进一步说明的人都可以阅读stackoverflow.com/questions/3202008/…为了方便起见

— simongcc 2014年

我有一个固定在底部的元素-宽度为100％，所以我使用窗口宽度作为posX-因此我能够确定用户是否按了：after css规则制作的“ X”在右上角。

— amurrell 2014年

很好的例子，但是.position（）和.offset（）之间没有什么明显的区别。您应该将元素#C包裹在某些父div中，并放置一些示例性位置，以查看单击#C可以将鼠标位置返回到元素#C的父元素内，这可能是最不常用的。

— amik

15

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

— 尼萨尔
source

3

试试这个：

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

在这里您可以找到更多关于DEMO的信息

— 克鲁纳尔
source

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
source

1

如果MouseEvent.offsetX是支持通过浏览器（所有主流浏览器实际上支持它），jQuery的事件对象将包含此属性。

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

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

— 米特·奥尔森（Memet Olsen）
source

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

— 黑色
source