内容	Javascript	値（あなたのPC値）
ディスプレイ上のマウスのX（横）位置情報	window.event.screenX
ディスプレイ上のマウスのY（縦）位置情報	window.event.screenY
ブラウザ上のマウスのX（横）位置情報	window.event.clientX
ブラウザ上のマウスのY（縦）位置情報	window.event.clientY
要素上のマウスのX（横）位置情報	window.event.offsetX
要素上のマウスのY（縦）位置情報	window.event.offsetY


スクロールの縦位置情報	document.documentElement.scrollTop
スクロールの横位置情報	document.documentElement.scrollTop

Back

マウスの位置を確認する方法

マウス位置に何かを表示する時などに、マウス位置を取得する時に使える方法。
「イベントオブジェクト」を利用するので、関数を呼び出す時に、引数に、イベントオブジェクトを格納する「e」「event」という引数を、最初に記述する。
そうすると、関数内で、マウスイベントの情報を取得することができる。
引数は、他の引数も渡せるので、「イベントオブジェクト」の引数を先頭にして、その後に、複数の引数を記述することも可能。

イベントオブジェクトの取得方法。

javascriptで、マウスの位置を確認するには、イベントオブジェクトを利用して確認する。

IEは、「window.event」でイベントオブジェクトを取得できる。
他のブラウザは、「関数(e){プログラム}」で、「e」引数にイベントオブジェクトが代入される。

IEと他のブラウザに対応させるために、「if (!e) e = window.event;」でイベントオブジェクトを「e」に代入させることで、IEブラウザに対応させる。

イベントのみで引数なしの関数

function 関数名(e){
if (!e) e = window.event;

var Screen_Width=e.screenX;
var Screen_Height=e.screenY;
var Browzer_Width=e.clientX;
var Browzer_Height=e.clientY;
}

イベントのみで引数なしの関数呼び出し

関数名(event);

//クリックしたときに実行される
document.onmousedown = 関数名;

//マウスを移動させると実行される
document.onmousemove = 関数名;

イベントと複数引数の関数

function 関数名(e,変数名,変数名,・・・・){
if (!e) e = window.event;

var Screen_Width=e.screenX;
var Screen_Height=e.screenY;
var Browzer_Width=e.clientX;
var Browzer_Height=e.clientY;

}

イベントと複数引数の関数の呼び出し

関数名(event,引数,引数,・・・・);

//クリックしたときに実行される
document.onmousedown = 関数名(event,引数,引数,・・・・);

//マウスを移動させると実行される
document.onmousemove = 関数名(event,引数,引数,・・・・);

イベントのプロパティ

プロパティ名	方	説明
screenX	Number	モニタのスクリーン領域の左上を原点(0)とした水平位置（ x 座標）
screenY	Number	モニタのスクリーン領域の左上を原点(0)とした垂直位置（ y 座標）
clientX	Number	ブラウザのクライアント領域の左上を原点(0)とした水平位置（ x 座標）
clientY	Number	ブラウザのクライアント領域の左上を原点(0)とした垂直位置（ y 座標）
offsetX	Number	イベントが発生した要素上のX座標
offsetY	Number	イベントが発生した要素上のY座標

Back

スクロール位置を確認する方法

スクロール位置を確認するとは

画像などを大きくして表示させたい時などに、スクロール位置を取得して、画像表示の位置を指定する時に使われる。
使える手法なので覚えておくと便利。

サンプルコード

画面をクリックした時に、実行されるJavascriptコード。

function MouseAction(e) {

標準モード
var ScrollTop_A=document.documentElement.scrollTop;
var ScrollLeft_A=document.documentElement.scrollLeft;

互換モード
var ScrollTop_B=document.body.scrollTop;
var ScrollLeft_B=document.body.scrollLeft;

var Get_ScrollTop=document.documentElement.scrollTop;
window.document.getElementById('id名').innerHTML=Get_ScrollTop+"px";
var Get_ScrollLeft=document.documentElement.scrollLeft; window.document.getElementById('id名').innerHTML=Get_ScrollLeft+"px";

}
document.onmousedown = MouseAction;

ブラウザ対応

FireFox	document.documentElement
IE ver.11	document.documentElement
Chrome	document.body
Safari	document.body

Back

【Javascript】「マウス」情報を取得する方法

INDEX

「Javascript」で取得できるマウス情報 一覧

マウスの位置を確認する方法

イベントオブジェクトの取得方法。

イベントのみで引数なしの関数

イベントのみで引数なしの関数呼び出し

イベントと複数引数の関数

イベントと複数引数の関数の呼び出し

イベントのプロパティ

スクロール位置を確認する方法

スクロール位置を確認するとは

サンプルコード

「Javascript」で取得できるマウス情報一覧