現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

イベント

JavaScriptでイベントが発生した位置を調べたい

投稿日:

★.x マウスのX座標を参照
★.y マウスのY座標を参照
★.clientX マウスの表示領域上のX座標を参照/設定
★.clientY マウスの表示領域上のY座標を参照/設定
★.pageX マウスのページ上のX座標を参照
★.pageY マウスのページ上のY座標を参照
★.screenX マウスの画面上のX座標を参照
★.screenY マウスの画面上のY座標を参照
★・・・Eventオブジェクト
ページ上および画面上における、イベント発生時のマウスの位置を調べます。clientXとclientYプロパティではブラウザの表示領域の左上隅からの相対座標を参照/設定するのに対し、pageXとpageYプロパティでは作成されるページ全体の左上隅からの相対座標を参照します。
// イベント発生時におけるマウスのX座標とY座標をダイアログに表示します。
alert(event.x + “,” + event.y);
// イベント発生時における、表示領域上のマウスのX座標をダイアログに表示します。
alert(event.clientX);
// イベント発生時における、表示領域上のマウスのY座標を変数cYに代入します。
cY = event.clientY;
// エレメント名 px の値をイベント発生時におけるマウスのページ上のX座標とします。
document.eForm.px.value = event.pageX;
// エレメント名 py の値をイベント発生時におけるマウスのページ上のY座標とします。
document.eForm.py.value = event.pageY;
// イベント発生時におけるマウスの画面上のX座標を変数 sX に代入します。
sX = event.screenX;
// イベント発生時におけるマウスの画面上のY座標が250ピクセル以上の場合、関数 myFunc() を呼び出します。
if (event.screenY >= 250) myFunc();

スポンサーリンク

-イベント
-

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

JavaScriptでマウスオーバー時に処理を行いたい

onmouseover = ★ マウスオーバー時 onmouseout = ★ マウスカーソルが離れたとき ★・・・実行する命令(関数や関数名) マウスカーソルがオブジェクト上に重なったとき、またはオ …

JavaScriptでコンテキストメニューを表示させない

oncontextmenu = ★ コンテキストメニュー表示用 ★・・・実行する命令(関数や関数名) oncontextmenuイベント     マウスの右ボタ …

JavaScriptでフォームのリセット時に処理を行いたい

onreset = ★ フォームリセット時 ★・・・実行する命令(関数や関数名) フォームがリセットされたときに発生するイベントです。実行する命令の戻り値がfalseの場合はリセットを行いません。 ス …

JavaScriptでキー操作によって処理を行いたい

onkeydown = ★ キーが押されたとき onkeypress = ★ キーが押されているとき onkeyup = ★ キーが離されたとき ★・・・実行する命令(関数や関数名) キーの操作状態に …

JavaScriptでサイズ変更時に処理を行いたい

onresize = ★ ★・・・実行する命令(関数や関数名) オブジェクトのサイズが変更されたときに発生するイベントです。サイズが変更されたときに処理を実行したい場合に使用します。ウィンドウやフレー …