Привязать события к изображению с холстом на вершине

Question

У меня есть изображение в HTML-документе с абсолютно позиционированным элементом Canvas поверх него, чтобы я мог рисовать поверх изображения.Это может показаться плохой практикой, но я также использую библиотеку JavaScript, которая добавляет эффекты к изображению при наведении на него курсора.По этой причине я не могу просто нарисовать изображение на холсте.

Однако наличие Canvas впереди нарушает работу библиотеки JavaScript, поскольку изображение больше не генерирует события наведения мыши.

Есть ли способ одновременно использовать эти две части функциональности?

(При необходимости я могу точно указать, в чем заключается моя проблема, но ответы более полезны, когда они являются общими.)

Answer 1

Вы можете использовать jQuery.trigger или dispatchEvent с initMouseEvent для ручного запуска события на изображении.

Answer 2

В конце я установил изображение в качестве фона CSS холста, а затем установил прозрачный png поверх, чтобы связать события и отслеживать движение.

Я также изменил библиотеку под свои нужды, так как не мог найти другой путь.

Answer 3

Простой способ привязать события к холсту, а затем прагматично отслеживать, находится ли курсор в пределах изображения ...