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. jQuery UI Month Picker Plugin
  2. humane.js

    JavaScript

    シンプルでモダンなさりげない通知システムを実装できる「humane.js」

    humane.jsはフレームワークなどに依存しないシンプルでモダンな通…

  3. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

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

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

  5. HoldOn.js

    JavaScript

    ユーザーの待機中に表示させるアニメーション実装「HoldOn.js」

    HoldOn.jsはユーザーが待機している間に表示させるアニメーション…

  6. JavaScript

    軽量で嬉しい!画像を拡大ズームしてくれるjQueryプラグイン「Leroy Zoom」

    Leroy ZoomというjQueryプラグインを使えば、画像を拡大ズ…

コメント

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

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

最近の記事

  1. EOS R6
  2. EOS R5
  3. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ

アーカイブ

PAGE TOP