jQuery Mouse Click

jQuery で Mouse の Click を検出します。

次のリンクをクリックすると jqmouseclick.html が呼び出されます。
ウインドウをクリックすると表示/非表示を切り替えます。
jQuery Mouse Click

プログラムの説明

  1. jqmouseclick.html のソースコードです。
    <html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>jQuery Click</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
  $(function()
  { $(document.body).click(function()
    {
      $("div").toggle();
    });
  });
  </script>
</head>
<body>
  <h1>jQuery Mouse Click</h1>
  <div>クリックすると表示/非表示を切り替えます</div>
</body>
</html>
  2. $(document.body).click() はウインドウがクリックされたときに呼び出されます。
    $("div").toggle(); で「表示/非表示」を切り替えます。
    表示だけの場合は show メソッド、消すだけの場合は hide メソッドがあります。
    jQuery を使わないマウスのクリック Mouse Down を検出 も忘れないで下さい。 (^_^;)
  3. $("div").toggle(); を次のように書き変えて下さい。
    マウスがクリックされる毎に TEXT が追加されます。
        $(document.body).append("append text<br>");

jquery.js では show, hide, toggle メソッドは次のように定義されています。
    show: function()
    {   return showHide( this, true );
    },
    hide: function()
    {   return showHide( this );
    },
    toggle: function( state )
    {   if ( typeof state === "boolean" )
        {   return state ? this.show() : this.hide();
        }
        return this.each(function()
        {   if ( isHidden( this ) )
            {   jQuery( this ).show();
            }
            else
            {   jQuery( this ).hide();
            }
        });
    }

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)