MouseEventで取得できる座標情報とキー情報

click イベントや mousemove イベントなどのマウスに関係したイベントが発生しイベントハンドラやイベントリスナーが呼び出されるとき、引数として発生したイベントに関する情報が含まれる MouseEvent オブジェクトが渡されてきます。 MouseEvent オブジェクトにはイベントが発生した時に押されていたキー情報や、マウスがクリックされた位置やマウスが動いた位置を表す座標の情報が含まれています。ここでは MouseEvent に含まれる座標の情報とキー情報を取得し利用する方法について解説します。

(Last modified: 2023年02月03日)

座標に関するプロパティ
キーに関するプロパティ

座標に関するプロパティ

MouseEvnet オブジェクトではイベントが発生したときのマウスの座標を表すプロパティが用意されています。座標はどこを原点とするかによっていくつかのプロパティが用意されています。

MouseEvent.offsetX  イベントが発生した要素の左上を原点とする座標
MouseEvent.offsetY  同上
MouseEvent.clientX  ブラウザの表示エリア左上を原点とする座標
MouseEvent.clientY  同上
MouseEvent.screenX  ディスプレイの左上を原点とする座標
MouseEvent.screenY  同上

座標に関するプロパティ(1)

またブラウザで表示している Web ページが縦または横に長く、ブラウザでページの一部分だけが表示されている場合に、 Web ページの左上を原点とするプロパティも用意されています。

MouseEvent.pageX  ページの左上を原点とする座標
MouseEvent.pageY  同上

座標に関するプロパティ(2)

addEventListener メソッドを使ってイベントリスナーを登録すると、イベントが発生してイベントリスナーが呼び出されるときに引数として発生したイベントに関する情報が含まれる MouseEvent オブジェクトが渡されてきます。この MouseEvnet オブジェクトに対してプロパティを参照します。下記は click イベントの場合です。

<input type="button" value="button" id="xxx">

<script>
function butotnClick(event){
    console.log(event.offsetX);
    console.log(event.offsetY);
}

let button = document.getElementById('xxx');
button.addEventListener('click', butotnClick);
</script>

座標を参照する場合でも、原点がどの位置からの座標を知りたいのかによって参照するプロパティを変更してください。

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style type="text/css">
#mybox{
width:600px;
height:200px;
border:1px solid #000000;
}
</style>
</head>
<body>

<p>座標を取得</p>

<div id="mybox"></div>

<script>
function mouseClick(event){
    console.log('offsetX : ' + event.offsetX);
    console.log('offsetY : ' + event.offsetY);
    console.log('clientX : ' + event.clientX);
    console.log('clientY : ' + event.clientY);
    console.log('pageX   : ' + event.pageX);
    console.log('pageY   : ' + event.pageY);
    console.log('screenX : ' + event.screenX);
    console.log('screenY : ' + event.screenY);
}

let mybox = document.getElementById('mybox');
mybox.addEventListener('click', mouseClick);
</script>

</body>
</html>

画面に表示されている div 要素上でマウスをクリックすると、色々な座標を取得してコンソールに出力します。

座標に関するプロパティ(3)

キーに関するプロパティ

マウスをクリックしたりマウスを動かしたときに、 Shift キーや Alt キーが押されていた場合、 MouseEvnet オブジェクトのプロパティを参照することで取得することができます。

MouseEvent.altKey    Alt キーが押されていれば true
MouseEvent.ctrlKey   Control キーが押されていれば true
MouseEvent.metaKey   Meta キーが押されていれば true
MouseEvent.shiftKey  Shift キーが押されていれば true

※ Windows10 環境では Meta キーは Windows キーに対応していました。

<input type="button" value="button" id="xxx">

<script>
function butotnClick(event){
    if (event.altKey){
      console.log('Push Alt Key');
    }
}

let button = document.getElementById('xxx');
button.addEventListener('click', butotnClick);
</script>

複数のキーが押されていた場合は、それぞれのプロパティが true になります。

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style type="text/css">
#mybox{
width:600px;
height:200px;
border:1px solid #000000;
}
</style>
</head>
<body>

<p>キーを取得</p>

<div id="mybox"></div>

<script>
function mouseClick(event){
    if (event.altKey){
      console.log('Push Alt Key');
    }

    if (event.ctrlKey){
      console.log('Push Control Key');
    }

    if (event.metaKey){
      console.log('Push Meta Key');
    }

    if (event.shiftKey){
      console.log('Push Shift Key');
    }
}

let mybox = document.getElementById('mybox');
mybox.addEventListener('click', mouseClick);
</script>

</body>
</html>

画面に表示されている div 要素上でマウスをクリックすると、その時に押されたいたキーをコンソールに出力します。

キーに関するプロパティ(1)

-- --

MouseEvent に含まれる座標の情報とキー情報を取得し利用する方法について解説しました。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。