パンジェンシーの「汗だく開発日誌」

システム開発の備忘録です。

トップ > Javascriptライブラリ > 【Javascript】マウスクリックイベントで関数を実行するライブラリを作りました

【Javascript】マウスクリックイベントで関数を実行するライブラリを作りました

Javascriptライブラリ

どうも、パンジェンシーでございます。

 

f:id:x-fieldatts:20150502134035p:plain

 

今回も、自分が作成したライブラリの紹介です。

 

Webアプリを作っていると、マウスでユーザーが何か入力した時に、何かしらの関数を実行するようにしたいということが多々あると思います。

 

しかし、いざ使おうとすると、単純にクリックだけなら簡単ですが、右クリックとかホイールクリックはどうやったら認識できるの？とか調べると色々面倒くさいです。

 

なので、そこを簡単にやってくれるライブラリ
「deva(デーヴァ).js」を作成してみました。ネーミングの由来はもちろん、ムーワァとデーヴァの大冒険のデーヴァです（笑） ====

 

コード

deva.js

// deva.js

/* example

    <script src="deva.js"></script>
    <button id="button"/>
    <script>
    var mouse = deva("button");
    mouse.on("left",function(){
        alert("left click!");
    })
    mouse.on("middle",function(){
        alert("middle click!");
    })
    mouse.on("right",function(){
        alert("right click!");
    })
    mouse.off("right");
    </script>

*/

var deva = function(id) {
    var DEBUG = 0;

    var elm = document.getElementById(id);
    var callbacks = [];

    function log(text) {
        if (DEBUG === 1) {
            console.log(text);
        }
    }

    function buttonNum(button) {
        switch (button) {
            case 'left':
                return 0;
            case 'middle':
                return 1;
            case 'right':
                return 2;
        }
    }

    elm.addEventListener('mousedown', function(event) {
        event.preventDefault();
        log(event.button);
        if (callbacks[event.button]) {
            callbacks[event.button]();
        }
    }, false);

    elm.addEventListener("contextmenu", function(event) {
        event.preventDefault();
        log("contextmenu");
    }, false);

    return {
        on: function(button, func) {
            var button_num = buttonNum(button);
            callbacks[button_num] = func;
        },
        off: function(button) {
            var button_num = buttonNum(button);
            delete callbacks[button_num];
        }
    };
};


テスト用のページは以下です。
test.html

<!doctype html>
<html lang='ja'>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>deva test</title>
</head>

<body>
    <button id="button">click</button>
</body>
<script src="deva.js"></script>
<script type="text/javascript">
//********************************************
// deva(デーヴァ).jsは、マウスクリックイベント
// を簡単に扱うためのライブラリです
//********************************************

var mouse = deva("button");
// まず、devaオブジェクトを作成します

mouse.on("middle", function() {
    alert("middle click");
});
// on()で、マウスイベント発生時に
// 実行する関数を登録します
// ボタンは、"left","middle","right"
// に対応しています

mouse.on("right", function() {
    alert("right click");
});

mouse.off("right");
// off()で登録した関数を削除できます

</script>

</html>

左クリックは、"left"、
右クリックは、"right"、
ホイールクリックは、"middle"、
に対応しています。

まとめ

今回は、マウスクリックイベントのコールバックを簡単に登録できるライブラリを紹介しました。


誰かのお役に立てれば幸いです。


ではまた。