第4章　「クリック時の処理」

jQueryでクリックした時に処理を行なうにはclick()を使います。クリック時の処理はclick()のパラメータに関数を指定します。クリック時には、クリックされたエレメントの情報（ポインタ）がthisに入っています。サンプル1ではクリックされたらdivタグの背景色を黄色にしています。これはthis.style.backgroundColorとすることでクリックされたエレメントのスタイルシートにアクセスすることができます。（サンプル1を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>イベントの処理</p>
<div>[1] ここをクリック</div>
<div>[2] ここをクリック</div>
<div>[3] ここをクリック</div>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


【JavaScript】
$(function(){
$("div").click(function(){
this.style.backgroundColor = "yellow";
});
});


特にクリック時に何も処理せずにデフォルトで設定されたクリック動作を行なわせるにはclick()のみ記述します。click()のパラメータに何も指定しなければブラウザ／HTMLで指定されているクリック動作が実行されます。サンプル2ではaタグにクリック動作を指定していますが、何もパラメータを指定していないため通常のリンク文字をクリックした事と同じになります（サンプル2を実行する）。
リンクやフォームの動作に関してはデフォルトの動作をキャンセルしたい場合があります。この場合には以下のようにreturn falseを指定することでデフォルトの動作をキャンセルすることができます（サンプル3を実行する）。

$(function(){
$("li a").click(function(){
return false;
});
});

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>イベントの処理</p>
<ul>
<li><a href="http://www.openspc2.org/">OpenSpace</a></li>
<li><a href="http://www.google.co.jp/">Google</a></li>
<li><a href="http://www.amazon.co.jp/">Amazon</a></li>
</ul>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


【JavaScript】
$(function(){
$("li a").click(function(){
return false;
});
});

[目次へ]