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

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

イベント

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でフォームの送信時に処理を行いたい

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

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

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

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

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

JavaScriptでマウスクリック時に処理を行いたい

onclick = ★ マウスクリック時 ondblclick = ★ マウスダブルクリック時 onmousedown = ★ マウスダウン時 onmouseup = ★ マウスアップ時 ★・・・実行 …

JavaScriptで押されたキーのキーコードを取得したい

★.keycode キーコードを参照 ★・・・Eventオブジェクト 入力されたキーのキーコード(文字コード)を参照します。 // 押されたキーのキーコードをダイアログに表示します。 alert(ev …