對於富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在其評論中提出的擔憂-對於整個用戶來說，將整個卡片用作鏈接是意外的。 在選擇了一些文本之后，他們可能只是在其上單擊某個位置，以再次刪除該選擇……或出於其他任何原因。 因此，畢竟讓卡的一部分可點擊也許是更好的選擇。

（此外，當用戶只是嘗試滾動頁面或捏縮放時，這在觸摸設備上的行為還肯定需要進行一些調查/測試。）