html - アンカータグ内にアンカータグを作成する

Question

ランダム テスト中に、アンカー タグを別のアンカー タグ内に配置する動作が見られました。jsfiddleを作成しました。

<a class="groupPopper">
     <a class="name"> content</a>
</a>​

しかし、開発者ツールでは異なるように見えます:

内側のアンカーをクリックすると、許可されるべきではない親アンカータグにクリックイベントが発生するため、アンカータグを別のアンカータグ内に配置することはできないと思います。

私の仮定は正しいですか？

Answer 1

@j08691 が説明しているように、ネストされたa要素は HTML 構文では禁止されています。HTML の仕様には理由が書かれていません。彼らはルールを強調しているだけです。

実用的な面では、ブラウザは解析ルールでこの制限を効果的に適用するため、他の多くの問題とは異なり、仕様に違反しても機能しません。パーサーは、新しい要素を開始する前に、開いている要素を暗黙的に終了するものとして<a>、開いている要素内の開始タグを効果的に扱います。a

したがって、 と書く<a href=foo>foo <a href=bar>bar</a> zap</a>と、ネストされた要素は取得されません。ブラウザはそれを として解析し<a href=foo>foo</a> <a href=bar>bar</a> zapます。つまり、2 つの連続するリンクの後にプレーン テキストが続くものとして解析します。

ネストされたa要素には、本質的に非論理的なものはありません。「foo」または「zap」をクリックすると外側のリンクがアクティブになり、「bar」をクリックすると内側のリンクがアクティブになるように実装できます。しかし、私にはそのような構造を使用する理由が見当たらず、おそらく HTML の設計者もそれを理解していなかったので、それを禁止して物事を単純化することにしました。

(ネストされたリンクを本当にシミュレートしたい場合は、通常のリンクを外側のリンクとして使用spanし、適切なイベント ハンドラーを持つ要素を内側の「リンク」として使用できます。または、リンクを複製することもできます<a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>。)

Answer 2

ネストされたリンクは違法です。

A要素によって定義されたリンクとアンカーはネストしてはなりません。A要素には他のA要素を含めることはできません。

Answer 3

div パネルをボタンでクリック可能にしようとしたときに、この問題に遭遇しました。私が推奨する回避策は、javascript イベントを使用することです。

これが私が作成したコードペンの例です.... http://codepen.io/thinkbonobo/pen/gPxJGV

そのhtml部分は次のとおりです。

リンクに埋め込まれたリンクの例....

<div class=panel onclick="alert('We\'ll hi-ii-ii-ide')">
  If you say run<br>
  <button onclick="app.hitMe(event)">more</button><br>
  <br>
  And if you say hide...<br>
</div>

内部リンクのイベントがどのようにキャプチャされ、stopPropagation() が使用されるかに注意してください。これは、外側のトリガーが実行されないようにするために重要です。

Answer 4

無効なHTMLです。

a要素をネストすることはできません。

したがって、定義上、動作は定義されていません。

Answer 5

そのようにしないでください。アプリで同じ問題に直面していました。<div>トップに<a>タグを追加し、子レベルにタグを追加するだけです。何かのようなもの：

<div id="myDiv"><a href="#"></a>
     <a href="#"></a>
</div>

スクリプト ファイルにも myDiv のクリック イベントを追加してください。

window.location.href = "#dashboardDetails";

Answer 6

これはコーディングの悪い方法ですが、これを試すことができます-

<a href="1">aaaa <table><tr><td><a href="2">bbbb </a></td></tr></table> </a>