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. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

  2. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  3. Inspiration for Menu Hover Effects
  4. Simply Modal Box
  5. Inspiration for Grid Loading Animations
  6. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

コメント

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

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

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP