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

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

イベント

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で押されたキーのキーコードを取得したい

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

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

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

JavaScriptで画像が読み込めないときに処理を行いたい

onabort = ★ 画像の読み込み中断時 onerror = ★ 画像の読み込み失敗時 ★・・・実行する命令(関数や関数名) 画像が読み込めない場合に発生するイベントです。読み込めない画像の有無を …

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

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

JavaScriptで読み込み時や移動時に処理を行いたい!

onload = ★ ページの読み込み時 onunload = ★ ページの切り替え時 ★・・・実行する命令(関数や関数名) ページの内容が完全に読み込まれたときやページの切り替え時に処理を実行したい …