イベントの扱い方その３（ダブルクリック）

jQuery イベントの扱い方

ダブルクリックイベント


お次はダブルクリックイベント。
記述の仕方はクリックと変わらん。

イベントの扱い方その１（注意点）でも記載したが、
イベントを登録した対象となる要素に、既にclickイベントが登録されていた場合、
dblclickイベントを登録してもclickイベントの方が先に処理される。
この現象を回避するためには・・・まぁサンプルを見てもらうということで。

<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() {
        $(".divClass").dblclick(function(){
          $(this).css("font-weight", "700").css("font-size", "20pt");
        });

        //aタグのように既にclickイベントが登録されている場合、
        //dblclickイベントを登録してもclickイベント（hrefへのリダイレクト処理）が先に
        //実行されてしまう。
        $("#a1").dblclick(function(){
          $(this).css("font-weight", "700").css("font-size", "20pt");
        });

        //あえてdblclickイベントを実行させたい場合は、メソッドチェーンを使って
        //登録されているclickイベントの実行をキャンセルさせてやる必要がある。
        $("#a2").dblclick(function(){
          $(this).css("font-weight", "700").css("font-size", "20pt");
        }).click(function(){
          return false;
        });
      })
    </script>
  </head>
  <body>
    <div class="divClass" style="color: red;">ぱんぱかぱんつ</div>
    <div class="divClass" style="color: blue;">ぱんぱかぱんつ</div>
    <div class="divClass" style="color: green;">すてきなぱんつで</div>
    <a id="a1" href="http://www3.digisbs.com/anime/vol07.html">ぱんぱかぱんつ</a>
    <a id="a2" href="http://www3.digisbs.com/anime/vol07.html">ぱんぱかぱんつ</a>
  </body>
</html>

メソッドチェーンでなんとかするとかイヤだなぁ。面倒くさいなぁ。
やっぱりリンク用のカスタム要素を自前で作っちゃった方がいいような気がするなぁ。。