javascript - 丰富的 Web 应用程序的嵌套链接(标签)的有效替代方案？

Question

我有一个丰富的 SPA 应用程序，其中包含一些“ Material 设计卡”(可能不是严格意义上的)，如下所示:

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

<小时/>

如您所见，它是一个丰富的小部件，您可以在其上进行交互(如点赞/评论/标签按钮)。我必须在该卡内显示一个链接(实际显示内容的“来源”，例如 nytimes.com)

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

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

You cannot have Interactive Content inside an A element. Interactive Content includes anchor tags.

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

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

Answer 1

A very important thing to note is that I'd like to preserve some of the defaults that come with links, including the fact that clicking it with middle click/ctrl opens in new tab, or that on hover the link is displayed at the bottom of 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>

卡片的容器元素，相对定位(因此我们可以将其用作后代元素绝对定位的 anchor )。

其中，第一个元素是我们到卡片完整版本的链接(我在这里只使用了 anchor 链接，以演示原理) - 但它不包含任何其他卡片内容，它基本上只是空的。 (为了照顾可访问性，例如为屏幕阅读器用户在其中放入描述性文本，并为视觉设备再次隐藏该文本，我将由您决定。)该元素获得绝对定位，并指定 0 对于所有四个 Angular 将使其自动拉伸(stretch)以覆盖整个父元素。再加上 z-index: -1 将其放在“后面”其余内容的后面。

如果您检查我的代码片段(或作为 fiddle ，此处: https://jsfiddle.net/Lz4o9114/1/ )，您应该能够将鼠标悬停在“like”链接上并看到它显示 ...#like浏览器状态栏，而将鼠标悬停在卡片的其余部分应显示 ...#fullcardview。通过上下文菜单在新选项卡中打开 #like 或 #fullview 应该按预期工作，中键单击/Ctrl ...整个 shebang 也应该如此。

<小时/>

现在，这是 z-index 的一个非常基本的用法……根据您的实际卡片内容和结构，您可能需要做更多的事情才能让它工作(比如给其余的部分)卡片内容的 z-index 高于卡片链接。​​)

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

<小时/>

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

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