この記事は、最後の更新から2548日を超えています。

2018.2.16

【jQuery】マウスボタンの押しっぱなし判定


概要

マウスボタンが特定の領域内で押しっぱなしにされている状態を取得するためのスクリプトです。
jQueryを利用します。また、PC専用です。

デモはこちら(新規タブで開く)

1. 処理を行う関数の作成

はじめに、ページの読み込み時に実行する関数を作成します。ここで作った関数の中に、マウスボタンの状態を検知する処理を書いていきます。


var pushing_mouse = function(){
    // ここに処理を書く
}

2. マウスボタンの状態を判定

次に、マウスボタンの状態を判定します。
領域内でマウスボタンが押された場合に、変数「pushing_flag」を1にするようにしています。
先ほど作った関数「pushing_mouse」内に下記コードを記述します。
※idが「click_area」である要素をターゲットにした場合の処理を想定していますので、適宜書き換えてください。


var pushing_flag = 0; // マウスの状態を示すフラグ(1なら領域内でボタンが押されている)

// id(=click_area)に対するマウスボタンの状態を検知
$("#click_area").mousedown(function(){
    // 領域内でマウスボタンを押した時
    pushing_flag = 1;
    return false;
}).mouseup(function(){
    // 領域内でマウスボタンを離した時
    pushing_flag = 0;
}).mouseleave(function(){
    // マウスカーソルが領域外になった時
    pushing_flag = 0;
}).mouseover(function(){
    // マウスカーソルが領域内になった時
    pushing_flag = 0;
});

上記コードにて、領域内でマウスボタンを押した瞬間を検知することはできました。
続いて、押しっぱなしである場合の処理を記述していきます。

3. マウスボタン押しっぱなしの判定

押しっぱなし中の処理を行う関数「mouse_push_hold」を用意します。
領域内でマウスボタンが押された際に、この関数をsetTimeout()で呼び出し続けることで、押しっぱなしの処理を行います。

まずは、押しっぱなし中の処理を行う関数「mouse_push_hold」を定義します。
「pushing_mouse」関数内に下記コードを追記してください。


var mouse_push_hold = function(){
    // ここに、マウスボタンを押しっぱなしにしている間に行いたい処理

    if( pushing_flag == 1 ){
        // 領域内でマウスボタンを押している場合、この関数を再び呼び出す
        setTimeout(mouse_push_hold, 1);
    }
};

さらに、2.で追加したコードを下記のように変更してください。


// id(=click_area)の領域内でのマウスの状態を検知
$("#click_area").mousedown(function(){
    // 領域内でマウスボタンを押した時
    pushing_flag = 1;
    setTimeout(mouse_push_hold, 1); // ここで「mouse_push_hold」を指定
    return false;
}).mouseup(function(){
    // 領域内でマウスボタンを離した時
    pushing_flag = 0;
    clearTimeout(mouse_push_hold);  // clearTimeout()の処理を止める
}).mouseleave(function(){
    // マウスカーソルが領域外になった時
    pushing_flag = 2;
    clearTimeout(mouse_push_hold);  // clearTimeout()の処理を止める
}).mouseover(function(){
    // マウスカーソルが領域内になった時
    pushing_flag = 0;
    clearTimeout(mouse_push_hold);  // clearTimeout()の処理を止める
});

判定を行う関数の作成は以上です。最後に作成した関数をページの読み込み時に実行するようにします。


// ページ読み込み時に実行
$(window).on("load",function(){
    pushing_mouse();
});

おわりに

実際の使い方は、デモページ(新規タブで開く)のソースコードなどを参考にしてみてください。


関連記事