要素内のマウスカーソルの座標を取得する！スマホ対応【Javascript】

• Date：2014-10-15
• Category：Javascript
• Tags：Javascript
• Response：Comments 0
• Tweet

  

  Pocket
  
  

Jsでちょっとしたリッチコンテンツを作りたい時に、マウスが特定の位置に来た時にアクションを起こすようなものを作りたくなる事があると思います。あと、スマホページを作る時とかですね。
そんな時に簡単に座標を習得出来る関数です。

座標を取得する関数

使い方

「onmousemove」は「onclick」でも大丈夫です。
マウスイベントの中で、座標を取得する関数の引数に「イベント」と「自分自身」を渡して上げると、マウスのX座標とY座標を配列で返してくれます。なので、後はその配列からX座標とY座標を取り出して上げるだけです。

スマホの時の注意点

スマホの「touchmove」にも対応していますが、スマホの場合は、要素をはみ出した後も座標を取得し続けます。
ですので、要素の中に指がある時だけ何らかの動きをさせるようなプログラムの場合は、要素をはみ出て、座標がマイナスや要素よりも大きくなった時の処理も考えなくては行けません。
詳しくは、実際にこのページをスマホで見るのが早いと思います。

動きのサンプル

基本のHTML

内側のDIVにマウスイベントを付けます。
外側のDIVは後の動きのサンプルで実験する為の枠です。

基本のサンプル

基本のHTMLを元に、内側のDIVの背景に色をつけているだけです。左上を基準にX座標とY座標が変化すると思います。

外側のDIVにpaddingを指定する

外側のDIVに内側の余白（padding）を指定してみました。特に親要素の影響は受けないみたいですね。

内側のDIVにpaddingを指定する

内側のDIVにpaddingを指定してみました。こちらも何事もなく動作するようです。

内側のDIVにmarginを指定する

内側のDIVにmarginを指定してみました。外側の余白をどのように解釈するのかわからなかったのですが、どうやら外側はちゃんと無視して動いてくれています。

内側のDIVにborderを指定する

内側のDIVにborderを指定してみました。borderも要素の大きさの一部とみられるみたいで、borderを含めた左上を基準に動くようです。
もし、borderの内側の座標だけを取りたい場合の対策は、外側のDIVにpaddingとbackground-colorを指定して擬似的にborderぽく見せると良いと思います。