jQueryでウィンドウサイズによって処理を変える

JavaScript

jQueryのマウス操作のイベントをまとめてみる

マウス操作に関するイベントをまとめてみました。まとめたイベントはmouseover/mouseout、mousedown/mouseup、click、mousemoveです。mousedown/mouseupとclickの違いなど自分の中で少しあいまいな部分があったのですが、今回まとめてみて区別できるようになったのでよかったです。

マウスイベントのまとめ

まずはマウスイベントに限ったことではないんですが、イベント処理の一般的な記述の仕方です。こんな感じで書きます。

$(セレクター).イベント(function(){
    イベント発生時の処理
});

これだけで色々なイベントを操作できるっていうのはとても簡単ですね。

mouseover/mouseout

mouseoverとmouseoutを使えば、ある要素にマウスが乗った時とマウスが離れた時によって処理を分けたりすることができます。そのまんまですね。以下のように使います。

$(function(){
    $('#sample')
    .mouseover(function(){
        $(this).css('background-color', 'Blue');
    })
    .mouseout(function(){
        $(this).css('background-color', 'Red');
    })
});

マウスが#sampleに乗ったら背景を青に変更し、マウスが離れたら赤になります。まあこれだけだったらCSSに書いた方がいいですけど。結構使う機会がありそうな感じです。

mousedown/mouseup

mousedownはマウスボタンが押下された時に発生するイベントで、mouseupはマウスボタンが離された時に発生するイベントです。clickと何が違うのって感じがするので調べてみるとどうやらクリックは押されて離した時に発生するイベントみたいです。以下簡単な使い方です。

$(function(){
    $('#sample')
    .mousedown(function(){
        $(this).css('background-color', 'Blue');
    })
    .mouseup(function(){
        $(this).css('background-color', 'Red');
    })
});

これで、#sampleという要素がマウスボタンで押下された時に背景が青になりマウスボタンを離したら赤になります。ついでに似ているclickも見てみます。

$(function(){
    $('#sample').click(function(){
        $(this).css('background-color', 'Blue');
    });
});

mousedown/mouseupと違い、マウスボタンを押して離したタイミングで#sample要素の背景が青になります。ちなみに全然関係ないですがこんな感じで色々と変数にも格納できます。

$(function(){
    var sample = $('#sample');
    var sampleclick = function(){
        $(this).css('background-color', 'Blue');
    };
    sample.click(sampleclick);
});

mousemove

mousemoveを使えば指定した要素上の座標なんかを知ることができます。例えばこんな感じです。

JavaScript

$(function(){
    $('#sample').mousemove(function(e){
        var x = e.pageX;
        var y = e.pageY;
        $('p').text('Xは' + x + '/Yは' + y);
    });
});

HTML

<div id="sample"><p></p></div>

CSS

#sample {
     width: 500px;
     height: 500px;
     background: #ccc;
}

これでdiv#sample上をマウスポインターが動くたびに現在の座標位置を知ることができます。引数eのイベントオブジェクトの中に座標の情報など色々入っているみたいです。これにより座標の数値によって背景を変えたりなんてことも簡単にできますね。

$(function(){
    $('#sample').mousemove(function(e){
        var x = e.pageX;
        var y = e.pageY;
        $('p').text('Xは' + x + '/Yは' + y);
        if (x > 250 && y > 250) {
            $('#sample').css('background-color', 'Blue');
        } else {
            $('#sample').css('background-color', 'Red');
        };
    });
});

上記は座標xとyが250以上なら背景が青になり、それ以外なら赤になるといったコードです。

終わりに

とりあえずイベントに関してはマウス操作だけでも色々あるので、全部覚えるには大変っすね。まあ全部覚える必要はないかと思いますが。他にもフォームに関するイベントなど色々あるので、少しずつ試してみようかと思います。

Macでシンプルなワードプロセッサ「Bean」をインストールしてみた前のページ

指定した画像を遅らせてローディングさせるjQueryプラグイン「Lazy Karl」の使い方次のページ

関連記事

  1. no-image

    JavaScript

    Lightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」

    slideBox.jsはレスポンシブに対応したLightboxスタイル…

  2. JavaScript

    巻き簾のようにメニューを開閉するアニメーションを実装できるjQueryプラグイン「Makisu」

    巻き簾のようにリスト化した要素を1つずつ開いていったり閉じていったりで…

  3. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  4. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

  5. Jquery Line Progress Bar
  6. Tooltipster

    JavaScript

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラグイン「Tooltipster…

    シンプルで使い勝手がとてもいいツールチップを実装できるjQueryプラ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP