【问题标题】:Pushing mouse click location to an array in Javascript将鼠标单击位置推送到Javascript中的数组
【发布时间】:2010-07-12 12:51:33
【问题描述】:

我正在尝试将鼠标单击特定元素的坐标推到数组的末尾。这就是我所拥有的:

在头脑中:

var seatsArray = [];

在体内:

var coordinates = document.getElementById("image");
coordinates.onclick = function(event) {
  seatsArray.push(offsetX, offsetY);
}
document.write("Seats array contains: " + seatsArray + ".");

可能是一些简单的事情,但我是 javascript 的新手,所以我很感激任何关于它为什么不起作用的帮助!

谢谢

【问题讨论】:

  • “坐标”相对于什么?文档的开头、“图像”元素、视口?
  • 相对于 id 为“image”的元素。谢谢
  • 离中心的距离还是离边缘的距离?当你问的时候,你可以更具体。
  • 对不起,我的意思是从左上角开始的像素坐标。答案中 Roki 的全局代码看起来很完美,但是当我 document.write 时数组中没有显示任何内容?我在下面的 cmets 中进行了更多解释。谢谢

标签: javascript arrays onclick getelementbyid


【解决方案1】:

我看到了两件事,将您的点击事件更改为:

coordinates.onclick = function(event) {
  event = event || window.event;
  if (!window.event) { // thanks firefox
    event.offsetX = event.layerX;
        event.offsetY = event.layerY;
  } 
  seatsArray.push(event.offsetX, event.offsetY);
}

Firefox offsetX/Y 是 layerX/Y,即有一个全局事件对象。

但如果你不知道全局坐标,试试这个:

coordinates.onclick = function(e) {
e = e || window.event;

if (e && e.pageX && e.pageY) {
            e.posX = e.pageX;
            e.posY = e.pageY;

        } else if (e && e.clientX && e.clientY) {
            var scr     = {x:0,y:0},
                object  = e.srcElement || e.target;
            //legendary get scrolled
            for (;object.parentNode;object = object.parentNode) {
                scr['x'] += object.scrollLeft;
                scr['y'] += object.scrollTop;
            } 
            e.posX = e.clientX + scr.x;
            e.posY = e.clientY + scr.y;
        } 
 seatsArray.push(e.posX, e.posY);
}

【讨论】:

  • 啊,是的。似乎仍然没有推送到数组,因为 document.write 仅输出我指定的文本,当我单击图像时没有坐标。谢谢
  • 全局脚本看起来很完美,但是 document.write 仍然没有数组输出。可能与“image”元素是可缩放和可平移的事实有关()?谢谢
  • @IceDragon:你在 click 处理程序中发出 document.write 调用?
  • RM,document.write 不在点击处理程序中。
  • @IceDragon:好的,所以您在附加点击处理程序后发出document.write 调用。此时数组为空。您必须实际单击内容才能填充数组。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-11-11
  • 1970-01-01
  • 2019-03-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多