2012-10-24 225 views
46

在我的隨機測試過程中,我看到了一個行爲,我在其他錨標記中放置了一個錨標記。我做了一個jsfiddle在錨標記內創建錨標記

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

但在開發工具似乎不同:

enter image description here

我相信我們不能把一個錨標記另一個錨定標記爲點擊內錨將泡漲的單擊事件不應該允許的父錨標記。

我的假設是否正確?

回答

71

作爲@ j08691描述,嵌套a元件在HTML語法禁止的。 HTML規範沒有說明爲什麼;他們只是強調規則。

實際上,瀏覽器在解析規則中有效地實施了這一限制,因此與其他許多問題不同,違反規範是行不通的。解析器將開放的a元素中的開始標籤有效地視爲在開始新元素之前隱式終止開放元素。

所以,如果你寫<a href=foo>foo <a href=bar>bar</a> zap</a>,你不會得到嵌套的元素。瀏覽器將其解析爲<a href=foo>foo</a> <a href=bar>bar</a> zap,即作爲兩個連續的鏈接後面跟着一些純文本。

嵌套的a元素本身並不存在任何不合邏輯的元素:它們可以通過點擊「foo」或「zap」來激活外部鏈接,點擊「bar」激活內部鏈接。但是我沒有看到使用這種結構的理由,HTML的設計人員也許沒有看到其中一個,所以他們決定禁止它,從而簡化事情。 (如果你真的想模擬嵌套鏈接,你可以使用普通鏈接作爲外部鏈接,並使用一個合適的事件處理程序作爲內部「鏈接」,也可以使用<a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>。)

3

這是無效的HTML。

您不能嵌套a元素。

因此,根據定義,行爲是不確定的。

+0

背後是什麼原因?只是想要更多的澄清。 – Anoop

+0

@Sushil - 回答我 - 嵌套'a'元素的含義是什麼?它可能意味着什麼? – Oded

+0

是的,它沒有任何意義,但它對我來說是新的東西,所以想要確定,因爲我可以把span,img ..標籤內錨標籤。 – Anoop

15

Nested links are illegal.

鏈接和錨由A元素定義不能嵌套;一個A 元素不得包含任何其他A元素。

+0

這背後的原因是什麼?只是想要更多的澄清。 – Anoop

+1

我不知道它背後的確切原因,但至少在語義上說,嵌套鏈接是沒有意義的。更何況與嵌套href值的實際鏈接似乎完全沒有意義。 – j08691

+0

這也是我的假設。只是想更確定。因爲我可以將其他標記(例如跨度)放在A標記內。 – Anoop

-3

這是編碼的好方法,但你可以試試這個 -

< A HREF = > AAAA <表> <TR> <TD> < A HREF = > BBBB </a > </td > </tr > < /表> </a >

+4

不像1996年的瀏覽器黑客看起來,這是行不通的。至少在Firefox中,當它找到內部錨點的開始時,它會嘗試通過關閉外部錨點來理解它。這也將涉及關閉td,td和table元素,然後在內部錨點關閉後再次打開它們。我在WooCommerce模板中看到了這種確切的行爲,包含了一些非常時髦和不明顯的格式問題,這導致我試圖找到答案。 – Jason

0

不要這樣做。我在我的應用程序中遇到了同樣的問題。 您可以簡單地在頂層添加<div>標籤,並在子級添加<a>標籤。 類似:

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

確保你在你的腳本文件中添加點擊事件myDiv爲好。

window.location.href = "#dashboardDetails";

3

我試圖也有按鈕,使一個div面板點擊時,偶然發現了這個問題。我推薦的解決方法是使用javascript事件。

這裏是我創建了一個codepen示例.... 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()。這對確保外觸發器不運行至關重要。

+1

我不得不使用event.preventDefault();在Chrome上 –

+0

它存在mmb-click無法在新標籤中打開鏈接的問題。 –

0

您不能嵌套'a'標籤。相反,將外部容器設置爲'position:relative',將第二個'a'設置爲'position:absolute',並增加其z-index值。你會得到同樣的效果。

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

可以使用對象標記來解決這個問題。 如

<a><object><a></a></object></a> 
+1

什麼?這是有史以來最糟糕的「解決方案」 –

+0

??爲什麼?你能告訴我.... – user9147812