2.1.8 如何实现链接元素的嵌套
<a>元素是无法嵌套<a>元素的,例如:
浏览器会自动将上面的链接元素渲染成平行结构的,就像下面这样:
在实际的开发过程中,难免会遇到需要链接嵌套的情况,尤其在移动端的开发中。
移动端的点击都是使用手指完成的,属于不精确的点击,因此我们常常将整个列表都做成可点击的,但是有时候,列表中还会有其他外链的信息,此时链接嵌套的情况就出现了,比如图2-12所示的这个例子,外部列表是个人详情链接,简介信息中的是书籍链接,瞧,这是典型的链接嵌套场景。
图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所示的饼图的三个分区就属于不规则的点击区域。
图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属性可以不用设置。