获取每次点击的鼠标坐标

时间:2015-01-12 09:54:14

标签: javascript mouse coordinates

我有以下脚本。我需要在图像循环结束时获取发送到我的电子邮件的每个鼠标点击坐标的坐标。有人可以帮我这个吗?我是非常新的,我正在尝试实现我的一些记忆任务(我之前在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>

1 个答案:

答案 0 :(得分:0)

你可以通过非常简单的数学获得鼠标坐标。
您要将事件处理程序附加到图像标记吗?如果是这种情况,您可以复制下面的代码 我知道如果你不了解中,你会感到非常沮丧 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">