HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM MouseEvent clientXプロパティとは？使い方とサンプルコードを解説

MouseEvent clientXプロパティとは

HTML DOM の MouseEvent clientX プロパティは、マウスイベントが発生した際に、マウスポインタの水平方向（X）の座標を返します。この座標は、ブラウザの表示領域（ビューポート）の左端を基準としたピクセル単位の数値です。

垂直方向（Y）の座標を取得したい場合は、clientY プロパティと組み合わせて使用します。両者を併用することで、画面上のマウスポインタの正確な位置を特定できます。

構文

clientX の値を参照する基本的な構文は以下のとおりです。

MouseEventObject.clientX

戻り値は数値型（ピクセル単位）で、通常はマウスイベントのハンドラ関数内で参照します。

clientX・clientYと類似プロパティの違い

  • clientX / clientY … ブラウザ表示領域（ビューポート）の左上を原点とする座標
  • screenX / screenY … 物理ディスプレイの左上を原点とする座標
  • pageX / pageY … ページ全体（スクロール量を含む）の左上を原点とする座標

MouseEvent clientXプロパティの使用例

次のサンプルでは、mousemove イベントで取得した clientX・clientY の値をもとに、緑色の安全エリア内でカーソルをゴールまで導くミニゲームを実装しています。カーソルが赤色の危険エリアに入るとゲームオーバーになり、安全エリアの指定位置に到達すると成功メッセージが表示されます。

<!DOCTYPE html>
<html>
<head>
<title>MouseEvent clientX</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    #outer {
        width:70%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        border:1px solid black;
        height: 105px;
        background-color: #28a745;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    #upper {
        border-bottom: 1px solid black;
        height: 40px;
        margin: 0 0 15px 0;
        background-color: #DC3545;
    }
    #lower {
        border-top: 1px solid black;
        height: 40px;
        margin: 15px 0 0 0;
        background-color: #DC3545;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
        <legend>MouseEvent-clientX</legend>
        <div id="outer">
        <div id="upper"><h2>危険</h2></div>
        <div id="lower"><h2>危険</h2></div>
        </div>
            <input type="button" id="start" value="スタート" onclick="gameStart()">
        <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById('divDisplay');
    var gameDisplay = document.getElementById('outer');
    function playGame(event) {
        var x = event.clientX;
        var y = event.clientY;
        if(y > 95 && y < 110){
            divDisplay.textContent = 'その調子！';
            if(x === 439){
                divDisplay.textContent = 'おめでとう！成功しました！';
                gameDisplay.removeEventListener('mousemove', playGame);
            }
        }
        else{
                divDisplay.textContent = '危険エリアに入ってしまいました。あなたの負けです！';
                gameDisplay.removeEventListener('mousemove', playGame);
        }
    }
    function gameStart(){
        gameDisplay.addEventListener('mousemove',playGame);
    }
</script>
</body>
</html>

実行結果

「スタート」ボタンをクリックし、カーソルが緑色（安全エリア）内にある場合：

HTML DOM MouseEvent clientXプロパティとは？使い方とサンプルコードを解説

「スタート」ボタンをクリックし、カーソルが緑色（安全エリア）の右端に到達した場合：

HTML DOM MouseEvent clientXプロパティとは？使い方とサンプルコードを解説

「スタート」ボタンをクリックし、カーソルが赤色（危険エリア）内にある場合：

HTML DOM MouseEvent clientXプロパティとは？使い方とサンプルコードを解説

  1. HTML DOMのMouseEvent offsetXプロパティとは？マウス座標の取得方法を解説

    MouseEvent offsetXプロパティとはHTML DOMのMouseEvent offsetXプロパティは、マウスイベントが発生した際に、ターゲット要素を基準としたマウスポインタの水平方向（X軸）の座標を返します。垂直方向（Y軸）の座標を取得したい場合は、offsetYプロパティと組み合わせて使用します。これらのプロパティを活用することで、要素内でのマウスの正確な位置を把握でき、ドラッグ＆ドロップ操作やゲーム、カスタムカーソル追従機能など、さまざまなインタラクティブなWebアプリケーションの実装に役立ちます。構文（シンタックス）offsetXプロパティの値を参照する基本的な構文は以下

  2. HTML DOM MouseEvent clientYプロパティとは？マウスのY座標を取得する方法を解説

    MouseEvent の clientY プロパティは、マウスイベントが発生した際のマウスポインタの縦方向（Y）の座標値を返します。clientX プロパティと組み合わせることで、横方向（X）の座標も同時に取得できます。これらの座標は、ブラウザの表示領域（ビューポート）の左上隅を原点（0,0）とした相対位置で表されます。そのため、画面上でカーソルが現在どの位置にあるのかを正確に把握したい場面、例えばドラッグ＆ドロップの実装やミニゲームの作成などで活躍します。構文clientY の値を参照する基本的な構文は以下の通りです。MouseEventObject.clientY戻り値はピクセル単位の数値