aタグのリンクを無効化する方法

javascriptでaタグのリンク遷移を無効化する方法

aタグにjavascript:void(0)を設定するだけでok

ただ、これだと仮にクリックしたときとかに「javascript:void(0)」と表示がでちゃう…

なので、click()イベント使ってaタグのリンクを無効化する。

jqueryを使ってaタグのリンク遷移を無効化する方法

//　html

//　jquery
$(function(){
	$('a.no_link').click(function(){
		return false;
	})
});

基本的にjqueryを使ってれば、クリックイベントを親要素に伝えられたりして汎用性があるかも

参考

▼aタグの無効化 – preventDefaultとreturn falseの違いとか
https://qiita.com/mwtonbel/items/f3c6e2373c348ea74b19

念のために、cssでマウスカーソルをデフォルトに戻します。
リンクだとわかりにくくするため。

//　css
.no_link{
	cursor: inherit;
}

これが一番早いと思いますcssの「pointer-events: none;」

//　css
.no_link{
	pointer-events:none;
}

aタグの無効化は、cssでもできて「pointer-events:none;」という手もあるんだけどモダンブラウザに対応してるしぶっちゃけこれが一番早い

参考

▼クリック・タッチを無効化するCSS「pointer-events: none;」がお手軽で便利
https://techblog.yahoo.co.jp/advent-calendar-2016/css_pointer_events/