2022年10月16日URLをコピーしました!マウスカーソルに追従する「マウスストーカー」の作り方を学習しました。jQueryを使わずに、素のJavaScriptで書いてみました。作成していて、学んだことを備忘録としてまとめていきます。完成サンプルCodeSandBoxを使って、サンプルを作成しました。以下より、HTML・CSS・JavaScriptのコードを順に書いていきます。0;}マウスストーカーの基準位置がウィンドウ画面になるようにposition:fixed;を指定しました。イベントの対象外とするため、pointer-events:none;を指定しました。その他のCSSは、要素の見た目調整やa要素やbutton要素がホバーされた時の挙動を指定しています。MouseStalker();コードの詳細はコメントアウトに書かれている通りです。一行一行のコードを翻訳すると、「理解できている点と理解できていない点」が分かってきました。学んだこと今回、学んだことはマウスストーカーのイベントを対象外にすることです。対象外にしなかったら以下のようになります↓button要素にマウスが乗ると、マウスストーカーを大きくしているのですが、まだ、マウスがbutton要素から離れていないのに、mouseleaveイベントが発生しています。これは、button要素にマウスが乗っていたが、マウスストーカー用のdiv要素にマウスが乗ったのでmouseleaveイベントが発生しているためです。イベントを対象外にしています。マウスストーカーだけじゃなくいろんな動きを実装して、もっとJavaScriptと仲良くなりたいです。