質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

6回答

22549閲覧

aタグ無効は"javascript:void(0)" か "#"か?

tomoyuki123

総合スコア273

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

6クリップ

投稿2017/04/14 03:52

編集2017/04/14 03:52

この2つの書き方が混在してる場合があって、使い分けがよくわかりません。
どちらにしろaタグは無効にされてるのでどっちでもいいんでしょうか?

html

1<a href="#" onClick="function();">送信</a>

html

1<a href="javascript:void(0)" onClick="function();return false;">送信</a>

またaタグ無効にするときの上記以外の方法があれば教えてください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答6

0

ベストアンサー

それはアンカー要素をマークアップするのに適切な論理構造を持っていますか?
それがリンクではないならa要素でマークアップすべきではないと思います。
マウスカーソルを変えたり、フォーカス可能な要素として <a> でマークアップして return false でページ遷移をキャンセルするなら初めから別の要素でマークアップして下さい。

送信ボタンとしての役割を期待しているようなので、普通に考えれば <input type="submit"> もしくは <input type="button"> が適切だと思います。
a要素的な見た目がほしければ、CSSで装飾して下さい。

Re: tomoyuki123 さん

投稿2017/04/14 05:22

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomoyuki123

2017/04/14 12:53

大変勉強になりました。皆様ありがとうございました。
guest

0

よく使われたのは

<a href="#" onclick="return myFunc();">送信</a>

のような形ですね。
myFunc()はreturn falseを返してください

href="#"

は存在しない飛び先を指定するので必ずしも正しいとはいえません
ただonclickでリンクへのジャンプをキャンセルする前提の処理なので
実際hrefにはなにを書いてあっても結構です

href="javascript:void(0)"

はjavascriptが無効なブラウザの場合おかしな挙動をすることがあります

最近はaddEventListenerやjQueryなどライブラリでイベントを付加する方が多いと思います。

投稿2017/04/14 04:06

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Zuishin

2017/04/14 10:03

「存在しない飛び先」というのがどうしても気になるのでやはり書いておきます。 URI の定義から言えば、相対表記の「#」は実際に存在する URI です。 その URI にアクセスしたときに何が得られるかというのはサーバー依存になるわけですが、例えばブラウザを開いて file:///C:/index.html# にアクセスすると、C ドライブのルートに置いた index.html が得られます。これは絶対表記で書いただけで、同じものを指す URI のはずです。 file:///C:/index.html# が存在し、index.html を返す以上、その相対表記である # も存在するんじゃないでしょうか?
yambejp

2017/04/14 13:02

なるほど、html5では空の#が許されるようになったんですね? 以前のhtmlの仕様ではhref="#"は行き先のないリンクとして なるべく使わないようにしようという話がメインだったのですが みんなが使えばそれがルールになるってことなんでしょうかね
think49

2017/04/14 13:54 編集

何となく拝見していましたが、URI は RFC2396, RFC3986 辺りの仕様だろうと考えていました。いずれもフラグメント識別子における # 以降の文字列は0回以上の繰り返しの為、# で終端する事が許可されています。 http://jbpe.tripod.com/rfcj/rfc2396.ej.sjis.txt https://triple-underscore.github.io/RFC3986-ja.html#section-3.5 > なるほど、html5では空の#が許されるようになったんですね? 実は HTML 仕様にも href 属性値のフォーマットに制約があり、<a href="#"> が許可されないバージョンが存在しているのでしょうか。 HTML 4.01 では RFC2396 に帰結する為、<a href="#"> は許可されているように読めました。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/links.html#h-12.2 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/types.html#type-uri http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/references.html#ref-URI
think49

2017/04/14 14:06 編集

ひょっとして、古くはお世話になった「Another HTML-lint gateway」で警告が現われた時代の名残でしょうか。 body要素直下に <p><a href="#">test</a></p> をマークアップした場合、https://validator.w3.org/ ではvalidですが、HTML-lintでは警告が発生します。 HTML-lint の解説に原典が書いてないところを見るに HTML-lint の独断で警告を発している感がありますが…。 仕様がある場合は解説で仕様にリンクを貼っていると記憶しているので、何もリンクが張られていない場合は HTML-lint 作者の判断で警告を発していると思います。 http://cetus.sakura.ne.jp/htmllint/explain.html#empty-fragment-id
guest

0

htmlのバージョンが特に書かれてないので、なんとも言えませんが、html5の場合はhrefが省略できるようです

投稿2017/04/18 07:13

anatawa12

総合スコア56

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2017/04/18 07:20

仕様には「a要素がhref属性を持たない場合、要素が関連していたならば、要素は、要素のコンテンツからなる、リンクが別の方法で置かれているかもしれない場所に対するプレースホルダーを表す。」とあります。 本質問は [送信] ボタンを意図していて「リンク」ではない為、要件を満たさないと思われます。 https://momdo.github.io/html/semantics.html#text-level-semantics
anatawa12

2017/04/18 07:23

なるほど、確かに要件を満たしませんね 調査不足ですみません
guest

0

aタグの無効化に関して言うと、以下でいいと思います。

html

1<a href="javascript: void(0)">遷移しない</a> 2<a href="http://example.com" onClick="return false;">遷移しない</a>

また、上記の式でjavascript: void(0)はvoidの中を評価した後にundefinedを返すという意味ですので以下と同じです。

html

1<a href="javascript:undefined">遷移しない</a>

どうでもいいんですがvoidの中は評価されるので以下のように書くと遷移します。

html

1<a href="javascript: void(window.location='http://google.com')">遷移しない</a>

投稿2017/04/14 04:08

編集2017/04/14 07:05
MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Zuishin

2017/04/14 07:08 編集

href="undefined" これ、遷移しないんですか? example.com はさすがに遷移するでしょう?
yambejp

2017/04/14 04:44

論理的な話だと読み替えてましたが実際にかいたらまずいですね ようはhref="javascript:undefined"ってことです でもそうかくならvoid(0)を書くべきです それとtest.comは遷移しないですよね?ご利用の環境だと遷移します? (javascriptが無効になっている?)
MasakazuFukami

2017/04/14 04:49

Zuishin様、yambejp様 コメントありがとうございます! javascript:undefinedに修正いたしました! また、test.comの件に関しては、こちらのローカル上で遷移しないことを検証済みです
date

2017/04/14 04:56

ただのクリックでは遷移しませんが 右クリックでリンク移動すれば移動できます そしてhttps://www.test.com/がURLとしてあるので例としては少しまずいのでは
Zuishin

2017/04/14 05:19 編集

onClick が記述されているので、JavaScript が有効ならどんな URL を書いても遷移しないとは思うんですが、date さんのおっしゃる通りで、これは実在の URL です。JavaScript が無効になっていたり、クリック以外の方法によっては遷移すると思います。つまり、タグ無効になりません。 たとえば、相手が人間でなかった場合、クリックを使わずに無関係のサイトに遷移していくのではないですか? ですから、# がいいか javascript:void(0) がいいかという話とは、完全に違う話だと思います。
MasakazuFukami

2017/04/14 05:20

みなさまコメントありがとうございます。 例がおかしかったり、不適切な回答のようなので後ほど削除させていただきます。
Zuishin

2017/04/14 05:21

残していただいた方が後で読む人の参考になるのではないですか?
MasakazuFukami

2017/04/14 05:27

ありがとうございます。 たしかにそうですね。 残しておこうと思います。
shi_ue

2017/04/14 06:48

残しておいた方が有益だと思いますが、例示ドメインはexample.comをお使いください。
guest

0

私はいつも、単純に次のようにしていますが... 。

HTML

1<a href="javascript:;">...</a>

投稿2017/04/18 13:32

ippya

総合スコア31

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

回答ではなく、皆様のご意見をお聞きしたいのですが、
モーダルリンクを実装したい場合、href属性無しのa要素って適切ですか?

href="#"もhref="javascript:void(0)"もホイールクリックで新規タブが開いてしまうので、
href属性無しがいいかなと。
タグの意味合いとしてはaタグが妥当だし、HTML5のバリデータでエラーが出ないので。

投稿2017/04/18 06:14

dewahajimeyou

総合スコア31

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2017/04/18 07:22

https://momdo.github.io/html/semantics.html#text-level-semantics より「a要素がhref属性を持たない場合、要素が関連していたならば、要素は、要素のコンテンツからなる、リンクが別の方法で置かれているかもしれない場所に対するプレースホルダーを表す。」を参照。 回答の場で便乗質問せず、新たに質問を立てる事をお勧めします。
ahodana

2017/04/18 22:55

4時代から hfef または name属性のいづれかが必須とかいう類いだったような
think49

2017/04/19 02:14

To: ahodana さん HTML4.01 であっても、href属性, name属性を持たないa要素を生成しても構いません。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/links.html#h-12.2 より「著者は、アンカーを1つも指定しないA要素、すなわち、href属性も name属性もid属性も指定されていないA要素を、生成してもよい。 これらの属性の値は、後にスクリプトによって設定できる。」を参照して下さい。 ところで、HTML5からa要素のname属性は削除されました。 繰り返しますが、派生質問は新たに質問スレッドを立てる事を推奨します。 「掲示板のログは共有資産である」というteratailの理念に沿うならば、質問別にスレッドが分かれている方が後で参照しやすいためです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問