富 Web 应用程序的嵌套链接（标签）的有效替代方案？

Question

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

我想知道“a”html标签是否适合处理点击卡片以打开全尺寸内容。

---

如您所见，它是一个丰富的小部件，您可以在其上进行交互（如喜欢/评论/标签按钮）。我可能不得不在这张卡片内显示一个链接（实际显示的内容的“来源”，例如nytimes.com）

当用户点击（或触摸，因为它也是一个 Cordova/移动应用程序）卡片时，我们应该转到卡片项目的 url 并全屏查看卡片项目（除非点击是在卡片按钮上。 ..)

所以我考虑使用链接（标签）作为卡片的包装，但它seems illegal 因为我已经在卡片内有源链接：

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

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

需要注意的一个非常重要的事情是，我想保留链接附带的一些默认值，包括使用中键单击/ctrl 在新选项卡中打开或悬停时显示链接的事实在 Chrome 的底部...我知道我可以使用 history.push 但这似乎很烦人，甚至不可能在纯 JS 中重新实现所有这些默认值...

Answer 1

需要注意的一个非常重要的事情是，我想保留链接附带的一些默认值，包括使用中键单击/ctrl 在新选项卡中打开或悬停时显示链接的事实在 Chrome 的底部...

首先，很高兴您考虑到这一点 - 大量开发人员不这样做，但只需执行 “啊，我将在其上放置一个点击处理程序，然后打开 URL通过location.href，就这样完成并处理了……”

为用户提供他们习惯的浏览器 UI 和功能是无障碍恕我直言的重要组成部分。

---

所以，由于链接不能相互嵌套（当然，结果行为是未定义的——我们是打开内部链接的目标 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 将其放在后面的其余内容“后面”。

如果您查看我的 sn-p（或作为小提琴，这里：https://jsfiddle.net/Lz4o9114/1/），您应该能够将鼠标悬停在“喜欢”链接上并看到它在浏览器状态栏中显示 ...#like，而悬停卡片的其余部分应显示...#fullcardview。通过上下文菜单在新选项卡中打开 #like 或 #fullview 应该可以按预期工作，中键单击/ctrl ... 整个 shebang 也应如此。

---

现在这是z-index 的一个非常基本的用法……根据你的实际卡片内容和结构，你可能需要做更多的工作才能让它工作（比如给卡片的其余内容一个更高的 z -索引比卡片链接。​​）

z-index 可能有点“善变的情妇”——有关堆叠上下文等内容的更多详细信息，我推荐 Philipp Walton 的优秀文章 What No One Told You About Z-Index。

---

最后但并非最不重要的一点是，我在一定程度上同意 Dávid Horváth 在他的评论中提出的担忧 - 用户可能会意想不到的是，整张卡片都充当了链接。他们可能会在他们选择了一些文本之后，只需单击它的某个位置，再次删除该选择……或出于任何其他原因。因此，也许只让卡片的一部分可点击可能是更好的选择。

（此外，当用户只是尝试滚动页面或捏拉缩放时，这在触摸设备上的表现如何，仍然需要一些调查/测试。）