href属性に"javascript:void(0);"指定した場合、モバイルのWebブラウザでは「リンクが無効です」のメッセージが表示される場合があります。モバイルでの利用も想定している場合は、href属性に "#" を指定すると回避できますが、リンククリック時にページの上部に遷移してしまう問題が発生します。対処法としてはonclick 属性ではなくhref属性にJavaScriptの処理内容を記述します。
aタグ(リンク)がクリックされたタイミングでJavaScriptを実行するコードと実行結果を紹介します。
ユーザーがリンクをクリックしたタイミングでJavaScriptを実行したいことがあります。
aタグのhrefにJavaScriptの処理を記述する方法と、onclick属性に実行したいJavaScriptの処理を記述する方式があります。
aタグのonclick属性に実行したいJavaScriptを記述した場合、リンククリック後ページが遷移してしまいます。リンククリック時のページ遷移を防ぐためにhref属性に"#"を指定するか、"javascript:void(0);"を指定します。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script language="javascript" type="text/javascript">
function OnLinkClick() {
target = document.getElementById("output");
target.innerHTML = "Penguin";
return false;
}
</script>
</head>
<body>
<a href="javascript:OnLinkClick();">Exec</a><br />
<br />
<div id="output"></div>
</body>
</html>
下記のコード部分でリンクがクリックされたときに実行するJavaScriptの関数です。
処理は"output"のIDを持つタグの要素を取得し、そのタグの内部のテキストにに"Penguin"の文字列を挿入します。
function OnLinkClick() {
target = document.getElementById("output");
target.innerHTML = "Penguin";
return false;
}
リンク部分です。href属性に javascript:(実行するJavaScriptコード) の形式で記述します。リンクがクリックされると href内のJavaScriptコードを実行します。下記のコードでは OnLinkClick() 関数を呼び出します。
<a href="javascript:OnLinkClick();">Exec</a><br />
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[Exec]リンクをクリックします。画面に"Penguin" の文字列が表示されます。リンクのクリックによりJavaScriptのOnLinkClick関数が実行できたことが確認できました。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script language="javascript" type="text/javascript">
function OnLinkClick() {
target = document.getElementById("output");
target.innerHTML = "Duck";
return false;
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="OnLinkClick();">Exec (onclick)</a><br />
<br />
<div id="output"></div>
</body>
</html>
OnLinkClick関数は先の例と同様コードです。画面に表示する文字列が "Duck" になります。
リンク部分です。href属性に javascript:void(0); を記述します。onclick 属性にリンクがクリックされたときに実行するJavaScriptのコードを記述します。リンクがクリックされると onclick内のJavaScriptコードを実行します。下記のコドでは OnLinkClick() 関数を呼び出します。
<a href="javascript:void(0);" onclick="OnLinkClick();">Exec (onclick)</a><br />
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[Exec]リンクをクリックします。画面に"Duck" の文字列が表示されます。リンクのクリックによりJavaScriptのOnLinkClick関数が実行できたことが確認できました。
下記のHTMLファイルを作成します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript">
function OnLinkClick() {
target = document.getElementById("output");
target.innerHTML = "Penguin";
return false;
}
</script>
</head>
<body>
<a href="#" onclick="OnLinkClick();">Exec1</a><br />
<a href="javascript:void(0);" onclick="OnLinkClick();">Exec2</a><br />
<br />
<div id="output"></div>
</body>
</html>
下記のコードでリンクがクリックされたときに実行するJavaScriptの関数を定義します。
処理は"output"のIDを持つタグの要素を取得し、そのタグの内部のテキストにに"Penguin"の文字列を挿入します。
<script language="javascript" type="text/javascript">
function OnLinkClick() {
target = document.getElementById("output");
target.innerHTML = "Penguin";
}
</script>
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[Exec1]または[Exec2]リンクをクリックします。"Penguin"の文字列が表示されることが確認できます。また、hrefに設定した"#"、"javascript:void(0);"により、ページの遷移が起きないことも確認できます。
午後三時。プロジェクトルームのガラス張りの壁に、初夏の陽射しが斜めに差し込み、カップに残ったコールドブリューが琥珀色の光を返していた。
フロントエンド担当の茜はノート PC を回転させ、円卓の中央に置いた。画面にはシンプルな HTML が映し出されている。
「ここが今日の主役ッス」
茜がタッチパッドを叩く。コードエディタのハイライトが示すのは、たった一行の a タグだった。
<a href="#" onclick="showHint(); return false;">詳しくはこちら</a>
彼女がブラウザのリンクをクリックすると、コンソールに “Hello, onclick!” が現れ、その一瞬後、隅で待機していたテスターの田中のスマホがブルッと震えた。
「え、俺に DM？」
田中が目を瞬く。
「リンクを押したら JavaScript が走って、API で通知を投げるように仕込んだんだよ」
茜が得意げに笑う。ホワイトボードには “onclick で副作用禁止” と赤いマーカーが引かれている。
リードエンジニアの山城が咳払いをして首を傾げた。
「副作用は最小限にしてね、と朝言ったばかりだけど」
「最小限ですよ。田中さんが驚いただけですから」
議事録係の美咲がキーボードを叩きながら呟く。
「通知テストは成功、と……」
その瞬間、会議室のスマートスピーカーが突如起動し、抑揚のない声で読み上げた。
「Hello, onclick! 午後三時四分、コーヒーの補充をお願いします」
全員の視線がカウンターに置かれた空っぽのポットへ集まる。茜は肩を竦めた。
「副作用――もう一つ、ね」
──なぜリンクを踏むとコーヒーが減るのか。
疑問を抱いた田中が、茜のノート PC を覗き込んだ。エディタのサイドバーに隠れていた showHint() の本体には、たった二行の非公開 API 呼び出しがあった。
第一行目は社内チャットボットへの POST。クリックした人物に「“Hello, onclick!” が届きました」と DM を飛ばす。
第二行目は IoT 制御用エンドポイント /devices/coffee-dispenser/pour へのリクエスト──引数は 30 ml。
給湯スペースのコーヒーメーカーは重量センサー付きで、リクエストを受けるとディスペンサーの電磁弁が開き、ポットから正確に 30 ml を吐き出してカップを満たす仕組みだ。
つまり誰かが「詳しくはこちら」をクリックするたび、
