addEventListener в теге Canvas

Question

У меня есть тег canvas для создания графики. В каждом разделе моей линии у меня есть «точка» для включения «наведения мыши» и отображения более подробной информации.

Все работает нормально, когда я не добавляю слушателя событий в эту точку.

Firebug предупреждает меня: s.addEventListener не является функцией ...

Можно ли создать динамический прослушиватель событий? (Я новичок в Javascript)

Answer 1

Вы не можете присоединять события DOM к вещам, отличным от объектов (элементов) DOM. canvas - это элемент DOM, а то, что вы рисуете на холсте, - нет. Они становятся частью холста в виде пикселей изображения.

Чтобы обнаружить щелчок в определенной точке на холсте, необходимо прикрепить событие click к элементу холста, а затем сравнить координаты x / y события click с координатами вашего холста.

На этот вопрос ответили: " Как получить координаты щелчка мышью на элементе холста? "

Answer 2

Если вы собираетесь рисовать основные структуры, я предлагаю вам использовать встроенную SVG.

В этом случае все элементы svg становятся элементами DOM, и вы можете прикрепить отдельные события к каждому из них.