用javascript处理画布的OnClick事件并获取其坐标

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。

您应该考虑不引人注目地附加事件，即使用onclick HTML属性而不是。

Answer 2

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

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

Answer 3

由于HTML5，只需获取事件本身的layerX和layerY属性。美好的