处理OnClick事件在JavaScript帆布和获取它的坐标

Question

我有一个画布绘制这样的

<div id="canvas" style="position:relative;width:600px;height:300px;" onclick="q()"></div>

我需要处理它，当点击事件，并得到画布上的坐标，它被点击

Answer 1

您需要获取页面的x和y坐标，然后减去canvas偏移量以使它们相对于canvas。

function q(event) { 
    event = event || window.event; 

    var canvas = document.getElementById('canvas'), 
     x = event.pageX - canvas.offsetLeft, 
     y = event.pageY - canvas.offsetTop; 

    alert(x + ' ' + y); 
} 

jsFiddle。

您应该考虑使用onclickHTML属性悄悄附加事件，即而不是。

Answer 2

使用jQuery，您可以直接阅读.pageX和.pageY属性。

http://docs.jquery.com/Tutorials:Mouse_Position#Where_did_they_click_that_div.3F

Answer 3

由于HTML5，刚刚拿到layerX和事件本身的属性layerY。太好了！