マウスとタッチのイベントはHammer.jsが便利

カテゴリーから探す

年別から見る

2015/12/03

マウスとタッチのイベントはHammer.jsが便利

最近ではPC、スマホの両方に対応したレスポンシブのサイトがほとんど当たり前のようになってきています。

サイトを作るときに、スマホのアプリのような操作性を求められることも増えて消えいます。

そういったとき、JavaScriptで大変になってくるのがマウスとタッチのイベントによる操作です。

私の場合、今まではjQueryによってイベントを取得し、

PCとタッチデバイスでイベントを振り分けて・・・といった方法を使っていましたが、

HTMLの要素が入り組んでいる場合、振り分けが煩雑になり、操作しきれなくなる場合がありました。

さらに、IEでは10,11で、タッチに対応していますが、

他のブラウザで標準化されているtoucheventではなく、pointerという独自のイベントを扱う必要があり、

その振り分けも別で必要になります。

こういった問題を全て解決してくれるのが、今回ご紹介するHammer.jsです。

Hammer.jsでは、デバイスやブラウザを選ばず、

タッチのイベントとしてひとまとめにして、イベントを扱うことができるようになります。

↓こちらはHammer.jsを使ったデモです

DEMO

※2015.12.04追記：
IE、Edge、Androidだとタップの感度があまり良くないようです・・・

使い方

Hammer.jsをダウンロード、設置し、読み込む
Hammer.jsの初期設定
Hammer.jsの各イベントの操作

1. Hammer.jsをダウンロード、設置し、読み込む

Hammer.JS – Hammer.js

↑こちらの公式サイトの「Hammer.min.js」というところをクリックしてダウンロードします。

ダウンロードしたら、HTMLで以下のように読み込みます。


<script src="js/hammer.min.js"></script>

1	<script src="js/hammer.min.js"></script>

2. Hammer.jsの初期設定

読み込めたら、JavaScriptを記述します。

まずはクリック＆タッチの対象となる要素をID指定し、Hammer.jsのオブジェクトを読み込みます。

今回はより使いやすくするため、jQueryも合わせて使っていますが、jQueryを読み込まなくても使うことはできます。


$(function() {
    //Hammer.jsオブジェクトの読み込み
    var $exampleElm = document.getElementById("example"),
        $hammerObj = new Hammer($exampleElm),
        $jqExampleElm = $($exampleElm)；
    $hammerObj.get("pan").set({ enable: true });
    $hammerObj.get("pinch").set({ enable: true });
    $hammerObj.get("tap").set({ enable: true });
    $hammerObj.get("swipe").set({ enable: true });
});

$(function() {

//Hammer.jsオブジェクトの読み込み

var $exampleElm = document.getElementById("example"),

$hammerObj = new Hammer($exampleElm),

$jqExampleElm = $($exampleElm)；

$hammerObj.get("pan").set({ enable: true });

$hammerObj.get("pinch").set({ enable: true });

$hammerObj.get("tap").set({ enable: true });

$hammerObj.get("swipe").set({ enable: true });

});

3. Hammer.jsの各イベントの操作

パン(ドラッグ)


    //pan event
    $hammerObj.on("pan",function(event) {
        if(event.isFinal) { //end
            panTime = false;
            $jqTgPanPinchArea.data("down", false);
            //パンが終わったときの操作
        } else {
            if(!panTime) { //start
                $jqExampleElm.data("down", true);
　　　　　　　　//パンを始めたときの動作
            } else { //move
                if ($jqExampleElm.data("down") == true) {
                    //パンしている途中の動作
                }
            }
        }
    });

//pan event

$hammerObj.on("pan",function(event) {

if(event.isFinal) { //end

panTime = false;

$jqTgPanPinchArea.data("down", false);

//パンが終わったときの操作

} else {

if(!panTime) { //start

$jqExampleElm.data("down", true);

　　　　　　　　//パンを始めたときの動作

} else { //move

if ($jqExampleElm.data("down") == true) {

//パンしている途中の動作

}

});

ピンチ(タッチデバイスのみ)


    var panTime = false,
        pinchTime = false,
        $pinchTimer = {};

    //pinch event
    $hammerObj.on("pinch",function(event) {
        event.preventDefault ? event.preventDefault() : (event.returnValue = false);
        if(!pinchTime) { //start
            pinchTime = event.timeStamp;
            //ピンチを始めたときの動作
        } else { //move
            if($pinchTimer) clearTimeout($pinchTimer);
            //ピンチをしている途中の動作
            $pinchTimer = setTimeout(function() { //end
                pinchTime = false;
                //ピンチが終わったときの動作
            }, 100);
        }
    });

var panTime = false,

pinchTime = false,

$pinchTimer = {};

//pinch event

$hammerObj.on("pinch",function(event) {

event.preventDefault ? event.preventDefault() : (event.returnValue = false);

if(!pinchTime) { //start

pinchTime = event.timeStamp;

//ピンチを始めたときの動作

} else { //move

if($pinchTimer) clearTimeout($pinchTimer);

//ピンチをしている途中の動作

$pinchTimer = setTimeout(function() { //end

pinchTime = false;

//ピンチが終わったときの動作

}, 100);

}

});

タップ(クリック)


    $hammerObj.on("tap", function(event) {
        //タップしたときの動作
    });

$hammerObj.on("tap", function(event) {

//タップしたときの動作

});

スワイプ(タッチデバイスのみ)


    //swipe
    $hammerObj.on("swipeleft", function(event) {
        //左へスワイプした時の動作
    });
    $hammerObj.on("swiperight", function(event) {
        //右へスワイプした時の動作
    });

//swipe

$hammerObj.on("swipeleft", function(event) {

//左へスワイプした時の動作

});

$hammerObj.on("swiperight", function(event) {

//右へスワイプした時の動作

});

細かなイベントの情報は、DEMOを参考にしていただければと思います。

是非ご利用下さい。