忍者ブログ

Memeplexes

プログラミング、3DCGとその他いろいろについて

ブログで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で取得します。)







拍手[0回]

PR