Menu
I have a canvas tag to create a graphic. At each section of my line, I have a "dot" to enable a 'mouseover' and display more detail.
Everything works fine when I don't add an event listener to this dot.
Firebug is warning me:
s.addEventListener is not a function...
Is it possible to create dynamic event listener? (I'm new to Javascript)
572
The Canvas event handling system closely follows the W3C DOM Event Model. If you have already used events in JavaScript and HTML most concepts of the Canvas event system should be already familiar to you. The most notable difference is the missing capture phase, but it is usually not used anyhow.
Definition and Usage. The addEventListener() method attaches an event handler to an element.
Summary: addEventListener can add multiple events, whereas with onclick this cannot be done. onclick can be added as an HTML attribute, whereas an addEventListener can only be added within <script> elements.
You cannot attach DOM events to things other than DOM objects (elements). The canvas is a DOM element, the things you are drawing to the canvas are not. They become a part of the canvas as pixels of an img.
In order to detect a click on a specific point on your canvas you must attach the click event on the canvas element, and then compare the x/y coordinates of the click event with the coordinates of your canvas.
This was answered in: "How do I get the coordinates of a mouse click on a canvas element?"
105
If you're gonna be drawing basic structures, I suggest you make use of inline svg.
In this case, all the svg elements become DOM elements and you can attach separate events to each of them.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
