获取每次点击的鼠标坐标

Question

我有以下脚本。我需要在图像循环结束时获取发送到我的电子邮件的每个鼠标单击坐标的坐标。有人可以帮我吗？我是这方面的新手，正在尝试在线实现我的一些记忆任务（我之前用 Matlab 编写过）。任何帮助将不胜感激。

这是我的脚本：

<head>
<title>Practice2</title>
<link type="text/css" rel="Stylesheet" href="MemStyle.CSS">
<script type = "text/javascript">        
var x=0;
function changeImage() 
{
if (x == images.length){
return;      
}

document.getElementById("img").src=images[x]
x++;
}

var images =  ["S2b.jpg", "S3b.jpg", "S4b.jpg", "S5b.jpg", "S1b.jpg"];       

</script>
</head>
<body>
<div id="MemImg">
<button onclick="changeImage()" >
<img id="img"  width="700px" height="700px" >
</button>   
</div>
</body>

Answer 1

你可以用非常简单的数学得到鼠标坐标。
您要将事件处理程序附加到图像标签吗？如果是这样，您可以复制以下代码。
我知道如果您不了解
，您会非常沮丧 javascript 事件，DOM 模型等。如果你
就不难理解了不过，只需花费一些精力。
我只是假设基点 (0,0) 将是图像标签所在的位置。
（如果图像标签位于 (34,34)，我假设 (34,34) 将是 (0,0)）

<script>
    function sendMouseCoodinate(evt){
       //if you just want send absolute moouseCoodinate, send evt.clientX, evt.clientY
       // sendToMyMail(evt.clientX, evt.clientY);
       //or you can send relative mouseCoodinate of image tag.
       var coodinateX = parseInt(evt.clientX) - this.getBoundingClientRect().left;
       var coodinateY = parseInt(evt.clientY) - this.getBoundingClientRect().top;
       // here you can send coodinateX, coodianteY value to your mail server

     }
     window.addEventListener("DOMContentLoaded",function(){
         document.getElementById("imgArea").addEventListener("mousedown", sendMouseCoodinate,false);
     });
</script>
<img id="imgArea">

获取每次点击的鼠标坐标

Getting Mouse Coordinates of each click

javascript

mouse

coordinates