2009-10-07 19 views
13

Tengo una etiqueta de lona para crear un gráfico. En cada sección de mi línea, tengo un "punto" para permitir un "mouseover" y mostrar más detalles.addEventListener in Canvas etiqueta

Todo funciona bien cuando no agrego un detector de eventos a este punto.

Firebug me está advirtiendo: s.addEventListener no es una función ...

¿Es posible crear detector de eventos dinámicos? (Soy nuevo en Javascript)

+0

Algún código nos ayudaría ... –

Respuesta

25

No puede adjuntar eventos DOM a objetos que no sean DOM (elementos). El canvas es un elemento DOM, las cosas que dibuja en el lienzo no lo son. Se convierten en una parte del lienzo como píxeles de un img.

Para detectar un clic en un punto específico de su lienzo, debe adjuntar el evento click en el elemento lienzo y luego comparar las coordenadas x/y del evento click con las coordenadas de su lienzo.

Este fue respondida en: "How do I get the coordinates of a mouse click on a canvas element?"

+0

Muchas gracias. Estaba más interesado en crear otro lienzo en el lienzo para agregarles el detector de eventos, pero no están visibles (quizás estén detrás del lienzo principal). De todos modos ahora estoy buscando una manera de detectar el evento en comparación con la posición del mouse. Gracias de nuevo :-) – kadiks

+0

Utilice el [Easel js framework] (http://easeljs.com) Esto simplifica enormemente la adición de la interacción del mouse a las formas dibujadas – Neil

4

Si vas a estar dibujando estructuras básicas, le sugiero que haga uso de SVG en línea.

En este caso, todos los elementos svg se convierten en elementos DOM y puede adjuntar eventos separados a cada uno de ellos.

Cuestiones relacionadas