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

2019年4月8日jQuery

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

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

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

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

HTML

<div>CLICK ME</div>

CSS

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

.selected{
  background:#000FFF;
}

jQuery

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

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

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

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

HTML

<div>CLICK ME</div>

CSS

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

.selected{
  background:#000FFF;
}

jQuery

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

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

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

2019年4月8日jQueryイベント

Posted by ヨウスケ