Javascript 将鼠标坐标保存在数组中_Javascript

Javascript 将鼠标坐标保存在数组中

javascript

Javascript 将鼠标坐标保存在数组中,javascript,Javascript,我想得到数组中的鼠标坐标。我还可以在无法获取鼠标坐标的任何位置单击鼠标 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

我想得到数组中的鼠标坐标。我还可以在无法获取鼠标坐标的任何位置单击鼠标

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>
    <style>body {background-color: ivory;}</style>
    </head>
    <body>
    <p id="results">result</p>
    <script>
    var x = document.getElementById("body");
    var offsetX = x.offsetLeft;
    var offsetY = x.offsetTop;
    x.addEventListener('click', handleClick, false);
    function handleClick(e) {
      mouseX = parseInt(e.clientX - offsetX);
      mouseY = parseInt(e.clientY - offsetY);
      document.getElementById("results").innerHTML = "You clicked at: " + mouseX + "/" + mouseY;
    }
    </script>
    </body>
</html>


谷歌地图
正文{背景色：象牙；}
结果
var x=document.getElementById（“主体”）；
var offsetX=x.offsetLeft；
var offsetY=x.offsetTop；
x、 addEventListener（'click'，handleClick，false）；
函数handleClick（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（e.clientY-offsetY）；
document.getElementById（“结果”）.innerHTML=“您单击的是：“+mouseX+”/“+mouseY；
}

HTML中没有包含

id=“body”

的元素。您可以使用

document.body

访问

元素

此外，主体相当小，因为它只包含一个

元素，因此您可能需要添加一些css，以便您可以单击窗口中的任何位置，事件将触发：

html, body {
    height: 100%;
}

要将计算出的坐标存储在数组中，只需创建一个空白数组：

var coords = [];

然后向其添加坐标：

coords.push([mouseX, mouseY]);

以下是一个工作示例：

var x=document.body；
var offsetX=x.offsetLeft；
var offsetY=x.offsetTop；
x、 addEventListener（'click'，handleClick，false）；
var-coords=[]；
函数handleClick（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（e.clientY-offsetY）；
coords.push（[mouseX，mouseY]）；
document.getElementById（“结果”）.innerHTML=“您已单击：”+JSON.stringify（coords）；
}

html，正文{
身高：100%；
}

result

我就是这样处理的

您没有id为

body

的

元素，因此我创建了一个id为bodyEquivalent

如果你想得到一个实际的标签，你需要使用
getElementsByTagName（'tag_name'）
返回匹配元素的数组（可以从数组中获取第一个元素）
或者更简单地说：document.body
用于body
标记

var x=document.getElementById（“bodyEquivalent”）；
//或
//var x=document.body；
var offsetX=x.offsetLeft；
var offsetY=x.offsetTop；
x、 addEventListener（'click'，handleClick，false）；
//要存储的数组单击坐标
var clickCoords=[]；
//点坐标
var ClickPoint=函数（x，y）{
这个.x=x；
这个。y=y；
};
ClickPoint.prototype.toString=函数（）{
返回“（“+this.x+”，“+this.y+”）”；
}
函数handleClick（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（e.clientY-offsetY）；
//创建单击点并将其存储在阵列中
var aClick=新点击点（mouseX、mouseY）；
单击Coords.push（单击）；
//更新结果
showArrayCoords（单击Coords）；
}
函数showArrayCoords（coords）{
var innerHtml='您单击的位置：
'；
对于（i=0；i”；
}
document.getElementById（“结果”）.innerHTML=innerHTML；
}
#车身当量{
背景颜色：象牙色；
边框：1px纯黑；
宽度：400px；
高度：300px；
}

result
您有什么具体问题吗？不确定我是否理解您的问题（如果有），您的HTML中没有带有id=“body”
的元素，并且-这与jQuery有什么关系？在我看来像是香草JavaScript…不起作用。我想在数组中保存单击的坐标。