メモ:JavaScript マウスイベントの実装

Border Gradinet で作成したカードに、
Gradient Effect を追加しようしたところで問題発生
エフェクトがカーソルと少しズレている
test.html
共通のコード
border.css  effect.css  cardMove.js  selectJs.js

test.htmlの実行

test.html?jsSelecter=test1

 カーソルとエフェクトがズレている
test1.js(マウスの動きに合わせてエフェクトを動かすスクリプト)

検証(verificat)

verificat.js(各要素の値を表示させるスクリプトを用意)

test.html?jsSelecter=verificat(マウスオーバーで値を表示)

pageX Y は、マウスイベント発火時のドキュメント全体からの相対位置を取得する
イベントオブジェクトの target は、id=inner のタグを取得しているが、
offsetLeft Topの基準点が”親要素”になってしまっているようで、
補正する値が "0" になってしまっている
おそらく、id=border のタグと同じ値を取得できればズレはなくなる
基準点の違いがズレとして表われていることがわかった
なぜズレるか?
positon の値が原因かと仮定して検証してみたが、原因ではなかった
原因特定は別な機会に…

修正(fix)

test.html?jsSelecter=fix

fix.js (カーソルと位置を合わせる)

.getBoundingClientRect() を使うと画面基準の位置を取得できるので、
エフェクトをカーソルの位置と合わせて表示できるようになった
※しかし、この Portfolio のトップページに上記を実装しようとしたが、
なぜかマウスイベントが発火せず、実装できなかった…
後日調査して実装したい

参考になったサイト

Element.getBoundingClientRect()