イベントの扱い方その４（mousedonw、mouseup）

jQuery イベントの扱い方

mousedown、mouseupイベントについて。


mousedownはお目当ての要素の上でマウスの左ボタンを押した時のイベント。
mouseupはお目当ての要素の上でマウスの左ボタンを離した時のイベント。
クリックとは違うので注意。


以下のサンプルは、文字列の上でマウスの左ボタンを押した場合に文字が大きくなり、
文字列の上でマウスの左ボタンを離した場合に文字が小さくなる感じ。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function() {
        $("div").mousedown(function(){
          $(this).css("font-size", "20pt");
        });
        $("div").mouseup(function(){
          $(this).css("font-size", "12pt");
        });
      })
    </script>
  </head>
  <body>
    <div>ぱんぱかぱんつ</div>
    <div>ぱんぱかぱんつ</div>
    <div>ぱんぱかぱんつ</div>
    <div>ぱんぱかぱんつ</div>
  </body>
</html>