JS---MouseEvent オブジェクト

MouseEvent オブジェクト

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

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

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



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

「zahyou.css」

#mybox{

    width:400px;

    height:200px;

    border:1px solid #000000;

    }

 

「zahyou.js」

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);

ブラウザを立ち上げる

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

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

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

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

サンプルコード

「ki.js」ファイル
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');
    }
}ブラウザを起動する

「Alt」キーを押しながら、クリックする

以上