Событие “mousemove” не срабатывает

232

11 июля 2018, 09:10

Надо, чтобы падающие черточки разлетались при наведении мыши

canvas.addEventListener("mousemove", function(e) { 
  pos_x = e.clientX + 10, 
    pos_y = e.clientY + 10 
});

Не срабатывает. Что тут не так?

https://jsfiddle.net/Nata_Hamster/u6dmoLrt/3/

Answer 1

Как уже ответили listener должен быть в методе init так-как там где он сейчас находится canvas ещё не определен. Но кроме того, просто поменять x/y в listener-е не получится так-как у каждой черточки своя x/y и прийдетса менять её у каждой черточки. И это нужно делать не в listener-е а в animate а то как только мышь перестанет двигаться, перестанут разлетаться и черточки.

Я вот тут написал версию вашего кода с изменениями которые я перечислил и с небольшой добавкой и очисткой кода:

https://jsfiddle.net/u1qoc806/

Answer 2

Поместите код canvas.addEventListener... внутрь функции init после canvas = document.getElementById("drawingCanvas");.