1. TOPページに戻る
  2. Javascript
  3. 既存のイベントを削除できるjQueryの.off()がとても便利

既存のイベントを削除できるjQueryの.off()がとても便利

サイト全体の共通部分は別で作られていて一部のコンテンツを自分が作るという時はよくあります。
そこで困ることがあるのが、共有jsファイルに書かれた処理を別の処理に変えたいとき。
今回はそのような自分が修正できないjsの処理を止めるjQueryのoffを使い方になります。

全体に効くJS

今回は例としてaタグでhrefが#だとスムーススクロールする指定があったとします。

$('nav li a[href^="#"]').on('click',function(){
	var areaPos = $(this).attr('href');
	areaPos = $(areaPos).offset().top;
	$('html,body').animate({scrollTop : areaPos},'slow');
});

上記だとnav以下にあるaタグのhrefが#で始まるものをクリックしたらすべてがスムーススクロールをします。

イベントを消して個別指定

この中で一番最後のliのリンクだけスムーススクロールをしたくない場合は以下のように記述します。

$('nav li:last-child a[href^="#"]').off();