答えを知りたい

jQuery を使って

「クリックされた時に左なら要素を消して、右なら何もしない。」

という動作をさせようと思ったら日本語だと検索してもすぐに答えが出てこなかったので、また stackoverflow から解説を紹介します。

実際のコードがこちら。

$('#element').mousedown(function(event) {
    switch (event.which) {
        case 1:
            alert('Left mouse button pressed');
            break;
        case 2:
            alert('Middle mouse button pressed');
            break;
        case 3:
            alert('Right mouse button pressed');
            break;
        default:
            alert('You have a strange mouse');
    }
});

mousedown の時に渡されるイベントを確認して場合わけすればよい、と。

つまり左クリックで要素を隠すにはこうします。

//左クリックされると foo を隠す
$(".foo").click(function(e){
  if(e.which == 1){ //左クリック
    $(this).hide("fast");
  }
});

他の方法

頻繁に使うのであれば jquery.detailclick.js を入れてこんな風に使えるようにしておくとよいかもしれません。やっぱりこちらの方が jQuery っぽくて見やすいですね。

$("target").rightClick(function()

  {

    $(this).text('右クリックされました！').css('background-color', '#ff3399');

});
参考
javascript - How to distinguish between left and right mouse click with jQuery? - Stack Overflow

http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery

JSNote - 左、中、右クリックのカスタムイベントを追加するjQueryプラグイン

http://jsnt.blog.fc2.com/blog-entry-3.html
 

			

$(window).width() と $(document).width() や
$(window).height() と $(document).height() がどういう時に違う値を返すかわからなかったので検索したら Stack Overflow に簡潔でわかりやすい説明がされてたので紹介します。

When you have a scrollbar on the webpage.
(スクロールバーが表示されてる時)

わかりやすいですね。一応念のために書いておくと window が「ブラウザの表示領域」で、document が「ページ全体」です。

参考

jquery – When can $(document).width() and $(window).width() show different values? – Stack Overflow
http://stackoverflow.com/questions/8134741/when-can-document-width-and-window-width-show-different-values

lispでmapに初めて触れた時は「何、このめんどくさい関数？」と感じ、正直な話あまり触れたくもなかったのですが慣れてくるとこいつはとても便利な賢いやつです。

さてjavascriptでもmapが使えるか調べてみたらjQueryで提供されてました。

mapを使えば配列全部に関数を適用させて、返り値を配列で受け取れます。for文なんて使わなくてもええんやっ！！

使い方の例

定番の累乗を求めるサンプル。

arr = [1,2,3];
arr = $.map(arr, function(n,i){return n*n;});
for(i=0;i<arr.length;i++){
  alert(arr[i]);
}

サンプルには良く使われるけど、実際にプログラミングしてて累乗が必要になったことがないですね。まあサンプルなんで実用性よりも分かりやすさが重要だから当然といえば当然の話しですね。

とりあえずこんな感じの動作がmapはできます。

要素をまとめて取得

たとえばこんなhtmlがあって

<div>1</div>
<div>2</div>
<div>3</div>

配列で[1,2,3]が欲しいとする。

そんな時もこの map を使えば一発解決さ！(深夜の外人がやってる通販のノリで)

arr = $("div").map(function(){
    return $(this).text();
  }).get();

これでとれる。注意点は最後の get()。これがなくても配列っぽいのが返ってくるんだけども、これはjQuery-wrapped arrayというものらしく別物とのこと。

for文で実行したり arr[0] で要素のアクセスしたりはできるけどもjoinすると上手く行かない。このjoinがうまくできないのにはまってだいぶ時間を食われました。

arr.constructor でクラスを調べたら

function Array() {
    [native code]
}

となるべき所が

function (a, b) {
    return new e.fn.init(a, b, h);
}

になってました。この「get() すればよい」という情報を得るためにどれだけ遠回りしたことか…。

とはいえこれで安心してmapをjavascriptでも使えるようになったのでガシガシ使っていこうと思います。

参考

http://api.jquery.com/map/