jQuery | 要素にクリックイベントを実装する方法

2019-03-112020-09-07jQuery イベント,jQuery

jQueryを使ってdivやpタグなどの通常の要素やテキストにクリックイベントを実装する方法です。

click()イベント関数を使ってクリックイベントを実装する方法

See the Pen Click event (jQuery) by yochans (@yochans) on CodePen.

サンプルコードではクリックイベント発火時に、toggleClass()を使って要素にclass名「selected」を付与・削除を切り替えています。

<div>CLICK ME</div>

div{
  display:inline-block;
  padding:20px;
  color:#FFF;
  background:#000;
}

.selected{
  background:#000FFF;
}

$('div').click(function() {
   $(this).toggleClass('selected');
});

on()イベント関数を使ってクリックイベントを実装する方法

See the Pen Click event (jQuery) by yochans (@yochans) on CodePen.

on()イベント関数でclick（要素上で左クリックボタンが押され、要素上で話された時）を指定しています。

<div>CLICK ME</div>

div{
  display:inline-block;
  padding:20px;
  color:#FFF;
  background:#000;
}

$('div').on('click', function() {
   $(this).toggleClass('selected');
});

サンプルではclick（要素上で左クリックボタンが押され、要素上で話された時）を指定していますが、ダブルクリックにしたい場合はdblclickを指定、押された時に発火イベントとしたい場合はmousedown、mousedownとmouseupを使う事で、押してから離されるまで一定時間間隔のある動作は許可しないという方法もあります。

on()イベント関数のマウスクリックだけでなフォーム要素に対するアクションやくキーボードキーの操作など種類は色々あって便利です。