manejo de eventos OnClick para la lona en javascript y obtener sus coordenadas

Question

que tienen un lienzo para dibujar así

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

que necesito para controlar el evento al hacer clic en él y obtener las coordenadas en el lienzo donde se hizo clic en

Answer 1

Necesita obtener las coordenadas xey de la página, y luego menos el desplazamiento canvas para obtenerlas relativas al 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.

Debe considerar adjuntar eventos discretamente, es decir, no utilizando el atributo HTML onclick.

Answer 2

Usando jQuery, puede simplemente leer los atributos .pageX y .pageY directamente.

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

Answer 3

Desde HTML5, acaba de obtener el layerX y atributos layerY del evento en sí. ¡Bonito!