Обработка события OnClick для холста в javascript и получение его координат

У меня есть холст для рисования, подобный этому

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

Мне нужно обработать событие при нажатии на него и получить координаты на холсте, где он был нажат

Ответ 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.

Ответ 2

Используя jQuery, вы можете просто напрямую прочитать атрибуты .pageX и .pageY.

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

Ответ 3

Начиная с HTML5, просто получите атрибуты layerX и layerY самого события. Ницца!