jQuery【 click 】クリックイベント

jQuery の click メソッドを使うと、ボタンや画像をクリックした際の処理を実装することができます。
今回は、jQuery の click メソッドの使用方法について解説いたします。

目次

1. click メソッド
2. ボタンをクリックした際の処理
3. BOX内をクリックした際の処理
4. まとめ

1. click メソッド

　
click メソッドは、特定の要素をクリックした際にイベントを発生させるメソッドです。

click メソッドは、引数によって 3 通りの記述方法があります。

$(セレクタ).click( );

$(セレクタ).click( handler( eventObject ) );

$(セレクタ).click( [ eventData ], handler( eventObject ) );

引数なしの「 .click( ) 」は、「 .trigger(“click”) 」の省略形です。
（trigger メソッドの使用方法についてはjQuery【 trigger 】手動でイベントを発生させる trigger メソッドをご参照下さい。）

また、「.click( handler( eventObject ) )」及び「.click( [ eventData ], handler( eventObject ) )」は、「on( "click", handler )」の省略形です。
（on メソッドの使用方法についてはjQuery【 on 】on メソッドの使い方をご参照下さい。）

click メソッドの引数の内容は、それぞれ以下の通りです。

.click( handler( eventObject ) )

handler( eventObject )
クリック時に実行する処理を関数として指定

　

.click( [ eventData ], handler( eventObject ) )

[ eventData ]
イベントハンドラに渡すデータをマップ値で指定
handler( eventObject )
クリック時に実行する処理を関数として指定

▲目次へ戻る

　

2. ボタンをクリックした際の処理

　
click メソッドを使用して、ボタンをクリックした際の処理を実装します。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {

  $("#btn1").click(function() {
    $("#out1").html($(this).val());
  });

  $("#btn2").click(function() {
    $("#out1").html($(this).val());
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:20px;">
  <input type="button" id="btn1" value="OK!">
　<input type="button" id="btn2" value="NG!">
　<span id="out1"></span>
</div>

上のサンプルでは、各ボタンがクリックされた際に「$("#out1").html($(this).val());」として ボタンの右のエリアに 各ボタンのテキスト（ value 値 ）が表示されるように記述しています。

▲目次へ戻る

　

3. BOX内をクリックした際の処理

　
click メソッドを使用して、クリックした位置の横方向（x座標）及び縦方向（y座標）の値を表示します。
グレーのエリア内で任意の場所をクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {

  $("#div1").click(function(e) {

    $("#out2").html("x : " + e.pageX + "<br>y : " + e.pageY);
  });
});
//-->
</script>

<div id="div1" style="position:relative; height:200px; background-color:#CCC;">
  <span id="out2" style="position: absolute; top:20%; left:10%;"></span>
</div>

特定の領域（ 上のサンプルでは id=”div1″ の div 要素 ）を指定して click メソッドを呼び出すと、その領域内であれば どこをクリックしても クリックイベントを発生させることができます。

上のサンプルではクリックした位置の x 座標と y 座標を表示していますが、「$("#div1").click(function(e) { ... });」のように function に引数（ 任意の変数名で上のサンプルでは「 e 」）を渡すと、「e.pageX」と「e.pageY」でクリック時の x 座標及び y 座標の値（ px ）が取得できます。

▲目次へ戻る

4. まとめ

jQueryのclick メソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る