图像的javascript偏移值_Javascript

图像的javascript偏移值

javascript

图像的javascript偏移值,javascript,Javascript,我正在尝试捕获图像上的单击事件（这是div的背景图像）。我有以下代码： findPos:function(obj) { var pos = new Object(); pos.x = pos.y = 0; if (obj.offsetParent) { do { pos.x += obj.offsetLeft;

我正在尝试捕获图像上的单击事件（这是div的背景图像）。我有以下代码：

findPos:function(obj) { 
          var pos = new Object();
          pos.x = pos.y = 0;        
          if (obj.offsetParent)  
          { 
            do  
            { 
              pos.x += obj.offsetLeft; 
              pos.y += obj.offsetTop; 
            } while (obj = obj.offsetParent); 
          } 
          return pos;
        }

上面的代码为div返回相同的值。但是我想获取div内的坐标。

您是否在寻找类似以下内容：

$（“#特殊”）。单击（功能（e）{
var x=e.pageX-this.offsetLeft；
变量y=e.pageY-this.offsetTop；
$（'#status2'）.html（x+，'+y）；
});
0, 0
点击我的任何地方！

只需找到div的坐标，就像你正在做的那样，然后从单击事件的鼠标坐标中减去它们。

你是想得到div内部的鼠标坐标，还是背景图像位置？div的相对鼠标坐标，使用csst居中这是一个很好的答案，只要@gk1不反对将jquery用于像这样的短代码段，只需将它们添加到答案中即可。外部“垃圾箱”往往会受到链接腐烂的影响。

$("#special").click(function(e){

    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;

      $('#status2').html(x +', '+ y);
   });

<html>
  <head>
    <script class="jsbin" 
            src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    </script>
  </head>
  <body>    
    <h2 id="status2">
     0, 0
    </h2>
    <div style="width: 100px; height: 100px; background:#ccc;" id="special">
    Click me anywhere!
    </div>
  </body>
</html>