JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

href属性が「#」のリンクでJavaScriptのクリック処理を無効化する方法

リンクの中には、href="#" のようにページ内遷移やダミーリンクとして設定されているものがあります。こうした「#」で始まるリンクに対してクリックイベントを発火させたくない場合、jQueryのセレクタと preventDefault() を組み合わせることで簡単に実現できます。

基本的な考え方

ポイントは、セレクタ a:not([href='#']) を使って「href属性が # 以外のリンク」だけを対象にすることです。これにより、# のリンクはクリックイベントの処理対象から除外され、何も起こらなくなります。また、対象となったリンクには event.preventDefault() を呼び出すことで、デフォルトのページ遷移動作をキャンセルしています。

サンプルコード

以下に実際の動作を確認できるHTMLコード全体を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<a href="urlLink">クリックするとログが出力されます</a>
<a href="urlLink">クリックするとコンソールにログが出力されます</a>
<a href="#">このリンクは何も起こりません</a>
<script>
    $(function(){
        $("a:not([href='#'])").click(function(event){
            event.preventDefault();
            console.log("リンクがクリックされました！");
        });
    });
</script>
</body>
</html>

実行方法

上記のコードを任意のファイル名（例：index.html）で保存します。VS Codeを使用している場合は、ファイルを右クリックして「Open with Live Server」（Live Serverで開く）を選択すると、ブラウザ上ですぐに動作を確認できます。

動作結果

最初の2つのリンク（「クリックするとログが出力されます」「クリックするとコンソールにログが出力されます」）を押すと、ブラウザの開発者ツールのコンソールにメッセージが表示されます。

href属性が「#」のリンクでJavaScriptのクリック処理を無効化する方法

一方、「このリンクは何も起こりません」という href="#" のリンクをクリックしても、イベントハンドラの対象外のため、コンソールには何も出力されません。

href属性が「#」のリンクでJavaScriptのクリック処理を無効化する方法

上の画像では、最初のリンク「クリックするとログが出力されます」を押してコンソールに出力された結果を確認できます。

さらに、「このリンクは何も起こりません」のリンクをクリックした場合は、以下のように何も表示されないことがわかります。

href属性が「#」のリンクでJavaScriptのクリック処理を無効化する方法

まとめ

  • $("a:not([href='#'])") で href が # 以外のリンクのみにクリックイベントをバインドできます。
  • event.preventDefault() を呼び出すことで、リンク本来の遷移処理をキャンセルできます。
  • # のダミーリンクはそもそもイベント対象から除外されるため、クリックしても何も発生しません。

このテクニックは、モーダルやタブ切替などでダミーリンクを使うUIを実装する際に非常に便利です。ぜひ活用してみてください。

  1. JavaScriptでEnterキー押下時にボタンクリックをトリガーする方法

    JavaScriptを使えば、テキスト入力欄の中で「Enter」キーが押された瞬間にボタンのクリックイベントを発火させることができます。フォームの送信や検索処理などでよく使われるテクニックです。本記事では、具体的な実装方法をサンプルコード付きでわかりやすく解説します。 基本の仕組み キーボード操作を検知するには、対象の入力欄にaddEventListener()でkeyupイベントを登録します。イベントオブジェクトのkeyCodeが「13」(Enterキーを表すキーコード)と一致した場合に、ボタンのclick()メソッドを呼び出すことで、実際にクリックした場合と同じ動作を実現できます。 サンプ

  2. JavaScriptで要素にクラス名を追加する方法をわかりやすく解説

    JavaScriptを使ってHTML要素にクラス名を追加するには、classList.add()メソッドを使用するのが最も簡単で推奨される方法です。この記事では、ボタンをクリックしたときにdiv要素へ新しいスタイル（クラス）を動的に適用する具体例を、コードと実行結果つきで解説します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <sty