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

我有一些“材料设计卡”（也许不是严格意义上的）这样一个丰富的SPA应用：富Web应用程序的嵌套链接（标签）的有效替代方法？

，我不知道如果“是” HTML标签是适当的处理卡上的点击以打开全尺寸的内容。您可以看到，它是一个可以在其上进行交互（如like/comment/tag buttons）的丰富小部件。我可以在此卡内显示一个链接（实际显示的内容的“源”，例如nytimes.com）

当用户点击（或触摸，因为它也是一个科尔多瓦/移动应用程序）卡，然后我们应该去卡的项目的网址和全屏查看卡项目（除非点击是在一个卡按钮...）

所以我想过使用链接（标签）作为卡周围的包装，但它seems illegal，因为我已经有卡内的源链接：

您不能有一个A元素内的交互式内容。交互式内容包括锚定标记。

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

一个非常重要的事情要注意的是，我想保留一些链接的默认值，包括点击中间点击/ Ctrl按钮在新标签中打开，或者悬停链接显示在Chrome的底部...我知道我可以使用history.push，但这似乎很烦人，甚至不可能实现普通JS中的所有这些默认值...

来源

2016-04-11 Sebastien Lorber

IMO，最好是只包锚点中的标题。特别是如果描述文字内容或可以内容活动元素。 –

@DávidHorváth这是一个好主意，甚至没有想过这个！我可能只是围绕“测试”（这是标题）的链接，但在这种情况下，点击区域会变得很小。几乎解决了这个问题，但并不理想 –

我同意@Dávid的评论;如果这种行为对用户来说意想不到，它可能不是最好的主意。无论如何，我提供了一个可能的解决方案。 – CBroe

需要注意的一个非常重要的事情是我想保留一些链接的默认值，包括点击中间点击/ ctrl点击它在新标签中，或悬停链接显示在Chrome的底部...

首先，你正在考虑这件事 - 很多开发者都没有，但只是去“啊，我只需要在它上面放一个点击处理程序，然后通过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将其放在后面的内容的后面。

如果你检查我的代码段（或者作为小提琴，在这里：https://jsfiddle.net/Lz4o9114/1/），你应该可以将鼠标悬停在“like”链接上并在浏览器状态栏中看到它显示...#like，而悬停卡片的其余部分应该显示...#fullcardview。通过上下文菜单在新标签中打开#like或#fullview应该像预期的那样工作，就像中间点击/ ctrl ...整个shebang一样。

现在，这是一个非常基本的使用z-index这里...根据您的实际卡片的内容和结构，你可能需要做更多一点得到它的工作（比如给卡内容的其余Z-index可以是一个“变幻莫测的女主人” - 对于像堆叠情况等东西的更多细节，我推荐Philipp Walton的优秀文章What No One Told You About Z-Index。

最后但并非最不重要的，我的关注戴维·霍瓦斯在他的评论中提出的部分同意 - 这可能是不期而至的用户，整个卡作为一个链接。他们可能会f.e.只需点击它上面的某个地方，在他们选择了一些文本之后，再次删除该选择......或者出于任何其他原因。所以也许只能让卡片的一部分点击可能是更好的选择。

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

来源

2016-04-11 11:39:32 CBroe

谢谢，这是一个不错的主意。我可能不会将它应用到整个卡片表面，但可能会在较小的区域使用它 –

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

回答

相关问题