Tworzenie znacznika zakotwiczenia wewnątrz znacznika zakotwiczenia

Question

Podczas moich losowych testów zobaczyłem zachowanie, w którym umieściłem znacznik zakotwiczenia w innym znaczniku zakotwiczenia. Zrobiłem jsfiddle.

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

Ale w narzędzia dewelopera wydaje się inna:

Uważam, że nie można umieścić znacznik zakotwiczenia wewnątrz innego znacznika zakotwiczenia, jak kliknięcie na wewnętrznej bańki kotwic się zdarzenia click do nadrzędny znacznik zakotwiczenia, który nie powinien być dozwolony.

Czy moje założenie jest prawidłowe?

Answer 1

Jak opisuje @ j08691, zagnieżdżone elementy a są zabronione w składni HTML. Specyfikacje HTML nie mówią, dlaczego; po prostu podkreślają regułę.

Po stronie praktycznej przeglądarki skutecznie egzekwują to ograniczenie w swoich regułach parsowania, więc w przeciwieństwie do wielu innych problemów, naruszenie specyfikacji właśnie nie będzie działać. Analizatory składni skutecznie traktują znacznik początkowy <a> wewnątrz otwartego elementu a jako niejawnie kończący element otwarty przed rozpoczęciem nowego.

Więc jeśli napiszesz <a href=foo>foo <a href=bar>bar</a> zap</a>, nie dostaniesz zagnieżdżonych elementów. Przeglądarki będą analizować je jako <a href=foo>foo</a> <a href=bar>bar</a> zap, tj. Jako dwa kolejne łącza, po których następuje zwykły tekst.

Nie ma nic nieodłącznie nielogicznego z zagnieżdżonymi elementami a: można je zaimplementować tak, że kliknięcie "foo" lub "zap" aktywuje zewnętrzny link, kliknięcie "bar" aktywuje wewnętrzne łącze. Ale nie widzę powodu, aby używać takiej struktury, a projektanci HTML prawdopodobnie też jej nie widzieli, więc postanowili jej zabronić, a tym samym uprościć pewne rzeczy. .

(Jeśli naprawdę chciał symulować zagnieżdżone odnośniki, można użyć zwykłego link jako zewnętrznego linku i element span z odpowiednim obsługi zdarzeń jako wewnętrzną „link” Alternatywnie, można powielać linki: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)

Answer 2

Jest nieprawidłowy HTML. Nie można zagnieżdżać elementów

.

Z definicji zachowanie jest niezdefiniowane.

Answer 3

Nested links are illegal.

linki i kotwy określony przez element nie może być zagnieżdżone; element A nie może zawierać żadnych innych elementów A.

Answer 4

To zły sposób kodowania, ale można spróbować -

< a href = > aaaa < stół > <tr> <td> < a href = > bbbb </a > </td > </tr > </tabela > </a >

Answer 5

Nie rób tego w ten sposób. W mojej aplikacji wystąpił ten sam problem. Możesz po prostu dodać tag <div> w znacznikach top i <a> na poziomie podrzędnym. coś takiego:

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

upewnij się dodać zdarzenie click dla myDiv w pliku skryptu, jak również.

window.location.href = "#dashboardDetails";

Answer 6

natknąłem się na ten problem, gdy próbuje zrobić panel klikalne div przez również przyciski. Obejściem, które zalecam jest użycie zdarzeń javascript.

Oto codepen przykład stworzyłem .... http://codepen.io/thinkbonobo/pen/gPxJGV

Oto część html z nim:

Przykład linku osadzonego w linku ....

<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> 

Wskazówka w jaki sposób zdarzenie dla łącza wewnętrznego jest przechwytywane i używana jest metoda stopPropagation(). jest to bardzo ważne, aby upewnić się, że zewnętrzny spust nie działa.

Answer 7

Nie można zagnieździć znaczników "a". Zamiast tego ustaw zewnętrzny kontener jako "position: relative" a drugi "a" jako "position: absolute" i zwiększ jego wartość indeksu Z. Otrzymasz ten sam efekt.

<div style="position:relative"> 
<a href="page2.php"><img src="image-1.png"></a> 
<a style="position:absolute;top:0;z-index:99" href="page1.php"></a> 
</div> 

Answer 8

Możesz użyć znacznika obiektu, aby rozwiązać ten problem. , takie jak

<a><object><a></a></object></a>