ブログでHTML5 Canvas マウスイベント

マウスボタンが押された時

HTML5特有の話ではありませんが、今回はマウスイベントを拾ってみましょう。
たとえばマウスボタンが押された時何かします。

<canvas id="mouseDownEventDemoCanvas" width="300" height="200"></canvas>
<script>
    (function () {
        var canvas = document.getElementById("mouseDownEventDemoCanvas");

        canvas.addEventListener(
            "mousedown",
            function (e) {
                alert("mouse down");
            });
    })();
</script>

上の空間をマウスでクリックしてみて下さい。
メッセージボックスが表示されます。

canvas.addEventListener(type, listener, useCapture)はイベントリスナーを登録するメソッドです。
あるイベントが起きた時、何をするかを登録するのです。
（例えば上の場合ではマウスのボタンが押された時、メッセージボックスを表示します。）

typeはイベント名です。"click"や"mousedown"を指定します。（前者はマウスのボタンが離された時、後者はマウスのボタンが押された時です）

listenerはイベントが起きた時実行する関数です。

useCaptureはイベントハンドラを追加するイベントフェイズです。

ちなみに、listenerの引数（上の例で言うとe）は、マウスイベントオブジェクトです。
次で詳しく説明します。

---

クリックされた時

次はクリックされた時に何かしてみましょう。

<canvas id="clickEventDemoCanvas" width="300" height="200"></canvas>
<script>
    (function () {
        var canvas = document.getElementById("clickEventDemoCanvas");

        canvas.addEventListener(
            "click",
            function (e) {
                var bounds = canvas.getBoundingClientRect();
                alert("X" + (e.clientX - bounds.left)+ " ,Y" + (e.clientY - bounds.top));
            });
    })();
</script>

イベントリスナーの引数eはMouseEventオブジェクトです。
次のようなプロパティがあります。

プロパティ	説明
screenX	マウスポインタのスクリーン上のX座標を取得します。
screenY	マウスポインタのスクリーン上のY座標を取得します。
clientX	マウスポインタのDOMコンテント上のX座標を取得します。
clientY	マウスポインタのDOMコンテント上のY座標を取得します。
ctrlKey	イベントが起きた時、ctrlキーが押されていればtrue、そうでなければfalseを取得します。
shiftKey	イベントが起きた時、shiftキーが押されていればtrue、そうでなければfalseを取得します。
altKey	イベントが起きた時、altキーが押されていればtrue、そうでなければfalseを取得します。
metaKey	イベントが起きた時、meta/ctrlキーが押されていればtrue、そうでなければfalseを取得します。
button	イベントを起こしたマウスボタンを取得します。
buttons	ユーザーが押しているマウスボタンを取得します。
relatedTarget	関連した要素を取得します。たとえばonmouseoutイベントではマウスポインタが入った要素を表します。（マウスポインタが出た要素はtargetで取得します。）