【コピペで使える】aタグでonclick属性を使う際にhrefのページ遷移を無効化する方法

たーさん

今回はaタグにonclick属性を付加しJavascriptを動かす際に、hrefによるページ遷移をしないようにするための記述方法を紹介します。

これ、使う度に忘れてしまっていて毎回調べるんですよね…。


<a href="#" onclick="test();return false;">スクリプト実行</a>

<script>
function test(){
  alert('実行しました。');
}
</script>

上記のようにonclick属性内に、return false;をくっつけることで実行後のページ遷移を無効にすることができます。

意外と使う機会があるので覚えておくとよいかと思います。

タドワークスのウェブサイトでは【コピペで使える】シリーズとして、実業務でよく使うサンプルコードをまとめていますのでよろしければ是非ブックマークをしておいて頂ければと思います。

投稿者プロフィール

たーさん代表者

東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。

その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。

開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。

現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。

見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。