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. PgwSlider

    JavaScript

    レスポンシブで軽量なスライダーを実装できるjQueryプラグイン「PgwSlider」

    PgwSliderというjQueryプラグインを使えばレスポンシブで軽…

  2. no-image

    JavaScript

    円形に広がるメニュー実装「expanding action button」

    expanding action buttonは円形に広がるメニューを…

  3. imgViewer2

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

  4. Lena.js

    JavaScript

    多彩な画像処理ができるJSライブラリ「Lena.js」

    Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セ…

  5. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  6. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

コメント

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

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

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP