【JavaScript】マウス操作による「イベント座標」とりあえず比較してみた【実験】
どうも！LSSです！！
※本日の記事のスクリプトは、スマホとIEを対象外としています。すみません^^;
先日の記事、
で、「クリックした時のマウスカーソルの位置から花火が打ち上がる」というのを作ってみました。
位置の指定には
position:absolute;
left:横位置px;
top:縦位置px;
という指定を用い、クリック位置の取得は
イベントオブジェクト.pageX
と
イベントオブジェクト.pageY
の数値を使う事で、PC用表示でもスマホ表示でも正しい位置から打ち上がるものが出来ましたが、このpageXとpageYの他にも「イベント座標」を取得するものがいくつかあります。
それぞれの違いをまだ正確に把握していませんが、とりあえず「それらがどんな値を返すのか」を確認するスクリプトを書いてみました。
マウス移動するとイベント座標を表示します
コード
<div id="gamen"> </div>
<script>// <![CDATA[
document.body.addEventListener("mousemove",mm,false);
function mm(ev){
txt='';
txt+='clientX / clientY '+ev.clientX+' / '+ev.clientY+'<br/>';
txt+='offsetX / offsetY '+ev.offsetX+' / '+ev.offsetY+'<br/>';
txt+='pageX / pageY '+ev.pageX+' / '+ev.pageY+'<br/>';
txt+='screenX / screenY '+ev.screenX+' / '+ev.screenY+'<br/>';
txt+='x / y '+ev.x+' / '+ev.y+'<br/>';
gamen.innerHTML=txt;
}
// ]]></script>
かなり簡単すぎるコードですがｗ
document.body.addEventListener("mousemove",mm,false);
は
「document.body（記事全体）に、addEventListener（発生したイベント＝記事を見てる人の画面内での操作を監視）を追加、mousemove（マウスを動か）したら、mmという関数を実行する」
という意味になります。
この一行のうち、mmは任意の名前（好きに名付けてOKな部分）で、それ以外は予約語（その通りに書かないといけない部分）です。
関数mmは、発生したイベント（マウスが動かされた）をevという変数に受け取り、ev.clientX などでイベント座標を取り出して、即座に書き出しています。
動かしてみた感じ
画面のスクロール位置に左右されず、あくまで記事上の特定位置を示してくれる pageX と pageY が使い勝手が良さそうに思えます^^
offsetは「要素上の座標」を返してくれる、という事で、今回のような「画面全体」を対象とせず、固定の枠組みの中であれば使い勝手がいい…のかもですね。（まだちゃんと理解していませんがｗ）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
