对于富Web应用程序，嵌套链接（标记）的有效替代方法是什么？

Question

我有一个丰富的SPA应用程序，其中包含一些“材料设计卡”（也许不是严格意义上的），例如：

并且我想知道“ a” html标记是否适合处理卡上的单击以打开完整尺寸的内容。

---

如您所见，它是一个丰富的小部件，您可以在上面进行交互（如like / comment / tag按钮）。 我可能必须在此卡内显示一个链接（实际显示的内容的“来源”，例如nytimes.com ）

当用户单击（或触摸，因为它也是Cordova /移动应用程序）卡片时，我们应该转到该卡片项目的网址，并以全屏方式查看该卡片项目（除非单击卡片按钮...）

因此，我考虑过使用链接（标签）作为卡周围的包装材料，但是这似乎是非法的，因为我已经在卡内包含了源链接：

您不能在A元素中包含交互式内容。 交互式内容包括锚标记。

那么，我应该如何解决这个用例呢？

需要注意的非常重要的一点是，我想保留一些链接附带的默认值，包括以下事实：使用中间单击/ ctrl单击该链接会在新选项卡中打开，或者在鼠标悬停时该链接会显示在底部。的Chrome浏览器...我知道我可以使用history.push，但是在纯JS中重新实现所有这些默认设置似乎很烦人甚至无法实现...

Answer 1

需要注意的非常重要的一点是，我想保留链接附带的一些默认值，包括以下事实：使用中间单击/ ctrl单击它会在新选项卡中打开，或者在鼠标悬停时该链接会显示在底部。的Chrome ...

首先，很高兴您正在考虑这个问题–大量的开发人员没有这样做，而只是去“啊，我将在其上放置一个点击处理程序，然后通过location.href打开URL，然后完成并处理了……”

为用户提供他们习惯的浏览器UI和功能是可访问性IMHO的重要组成部分。

---

因此，由于链接不能彼此嵌套（这当然是合理的，因此最终的行为将是不确定的–我们打开内部链接还是外部链接的目标URL？），另一种解决方案是模拟您想通过一些CSS技巧来实现。

 .card { position: relative; z-index: 1; display: inline-block; width: 100px; padding: 50px; background: #ccc; } .cardlink { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; } 

 <div class="card"> <a class="cardlink" href="#fullcardview"></a> <p>Foo bar baz</p> <p> <a href="#like">Like</a> </p> </div> 

我们卡片的容器元素，是相对放置的（因此我们可以将其用作绝对定位后代元素的锚点）。

在此，第一个元素是我们到卡的完整版本的链接（我在这里仅使用锚链接来演示原理）–但是它没有封装任何其他卡内容，基本上只是空的。 （要注意可访问性，例如在屏幕阅读器用户中放入描述性文字，然后再将其隐藏在可视设备中，我将由您自己决定。）该元素将绝对定位，并为所有四个角指定0它会拉伸以自动覆盖整个父元素。 加上z-index: -1 ，将其“置于”随后的其余内容之后。

如果您查看我的代码段（或作为小提琴，请访问此处： https : //jsfiddle.net/Lz4o9114/1/ ），则应该可以将鼠标悬停在“ like”链接上，并在...#like显示...#like浏览器状态栏，而将...#fullcardview悬停在卡的其余部分应显示...#fullcardview 。 通过上下文菜单在新选项卡中打开#like或#fullview应该可以正常工作，中击/ Ctrl…整个效果都应该如此。

---

现在，这是z-index的非常基本的用法…根据您实际的卡片内容和结构，您可能需要做更多的工作才能使其工作（例如，为其余卡片内容提供比z高的z-index）卡链接。）

z-index可能有点“善变” –有关堆叠上下文等内容的更多详细信息，我建议Philipp Walton的出色文章《关于Z-Index的无人问津》 。

---

最后但并非最不重要的一点是，我在某种程度上同意DávidHorváth在其评论中提出的担忧-对于整个用户来说，将整个卡片用作链接是意外的。 在选择了一些文本之后，他们可能只是在其上单击某个位置，以再次删除该选择……或出于其他任何原因。 因此，毕竟让卡的一部分可点击也许是更好的选择。

（此外，当用户只是尝试滚动页面或捏缩放时，这在触摸设备上的行为还肯定需要进行一些调查/测试。）