2.1.8 如何實現鏈接元素的嵌套

<a>元素是無法嵌套<a>元素的，例如：

瀏覽器會自動將上面的鏈接元素渲染成平行結構的，就像下面這樣：

在實際的開發過程中，難免會遇到需要鏈接嵌套的情況，尤其在移動端的開發中。

移動端的點擊都是使用手指完成的，屬于不精確的點擊，因此我們常常將整個列表都做成可點擊的，但是有時候，列表中還會有其他外鏈的信息，此時鏈接嵌套的情況就出現了，比如圖2-12所示的這個例子，外部列表是個人詳情鏈接，簡介信息中的是書籍鏈接，瞧，這是典型的鏈接嵌套場景。

如果是你，你會如何實現此需求？

使用JavaScript的location.href方法觸發跳轉？可以，是個方法！除此之外呢？

嘿，不妨試試使用<area>元素。

<area>元素也是HTML標準元素，它的許多行為和<a>元素的都是一樣的，不僅原生支持href屬性的跳轉行為，對于target、rel、ping、referrerpolicy等屬性也都是支持的。

不過<area>元素并非嵌套元素，無法包裹文字或其他標簽，所以作為鏈接出現的時候，只能覆蓋在其他的元素上。

例如，上面鏈接嵌套的需求可以使用如下所示的代碼實現（僅展示關鍵部分）：

此時，再使用CSS讓<area>元素絕對定位覆蓋外面的<span>元素就可以了：

此方法簡單又干脆，且語義和無障礙訪問都沒問題，在桌面端瀏覽器中，把光標移動到對應的鏈接上，瀏覽器也會在左下角顯示鏈接地址（Safari除外，因為Safari沒有提示鏈接地址的行為）。

可以通過在瀏覽器中輸入地址https://www.htmlapi.cn/2/1-8.html或掃碼訪問來體驗。

然而，上面這種寫法目前僅在Chrome瀏覽器下有效，在Firefox和Safari瀏覽器下，<area>元素尚不能脫離<map>元素使用。

這一點說來話就長了。

<area>和<map>元素原本的作用

<area>和<map>元素原本的作用是給圖片元素上標記不規則的點擊區域，例如圖2-13所示的餅圖的三個分區就屬于不規則的點擊區域。

這種場景下的最佳實現一定是使用<area>和<map>元素。

此時，不同的餅圖區域就會有不同的鏈接，有演示頁面，可以通過在瀏覽器中輸入地址https://www.htmlapi.cn/2/1-9.html或掃碼訪問來體驗。

其中出現了若干個必須要出現的屬性和元素。

（1）<img>元素，<map>元素的生效離不開圖片元素。

（2）usemap屬性，用來指向使用哪個熱點地圖，需要以“＃”開頭。

（3）<map>元素，需要設置id或者name屬性值，方便和usemap屬性值匹配。

（4）<area>元素，設置鏈接地址及點擊區域的形狀與坐標信息。

上面四個要素中，前三個比較簡單，不展開講，重點講一下<area>元素的幾個比較獨有的HTML屬性。

1.shape

shape表示點擊熱點區域的形狀，支持矩形（rect）、圓形（circle）以及多邊形（poly）。

2.coords

coords表示點擊熱點區域形狀的坐標。坐標點（0，0）表示圖片的左上角。其中rect支持4個數值，2個坐標，分別是矩形左上角坐標和矩形右下角坐標。例如，coords="20，20，80，80"生成的就是一個左上角坐標（20，20）、寬和高都是60px的矩形區域。circle支持3個數值，前2個值為圓心坐標，第3個值為圓的半徑大小。poly就更簡單了，每兩個數值組合表示一個坐標點，依次連線形成的區域就是最終的熱點區域。

3.alt

alt同<img>元素的alt，表示熱點區域圖片的描述信息。

大家可能知道CSS中有個名為clip-path的CSS屬性，支持矩形、圓形和多邊形的剪裁，<area>元素的coords屬性值語法與之類似，區別在于，coords屬性的兼容性更好，包括IE8瀏覽器在內的瀏覽器都支持。然而，很可惜的是，<area>元素無法像普通元素那樣進行樣式自定義，邊框、背景色之類的樣式都是無效的。這個特點限制了其只能覆蓋在某些元素上作為點擊區域使用。

了解了<area>元素，我們再回到一開始的那個鏈接嵌套的問題。

既然Firefox和Safari瀏覽器不支持單純的<area>覆蓋，我們就使用標準的語法，也就是使用<img>元素覆蓋，然后將整個<img>元素都做成點擊鏈接。

HTML代碼示意如下（只展示核心部分）：

此時，所有的瀏覽器，包括IE瀏覽器在內，點擊書名都能跳轉到另外的鏈接，不受外部<a>元素鏈接的影響。

演示頁面就是上面出現過的https://www.htmlapi.cn/2/1-8.html，其中有個前端小技巧，就是讓<area>元素的矩形坐標值設置得足夠大，這樣，可以復用在任意尺寸的點擊元素上，而不用關心點擊元素具體的尺寸大小，<img>元素的src屬性可以不用設置。