リッチWebアプリケーションのネストされたリンク（タグ）に妥当な代替手段はありますか？

Question

私はこの1つのようないくつかの「材料・デザインカード」（そうでないかもしれない、厳密な意味での）と豊富なSPAのアプリケーションを持っている：

をし、「」HTMLタグに適切であれば、私は疑問に思いますカードのクリックを処理して、フルサイズのコンテンツを開きます。

---

ご覧のとおり、インタラクション（like/comment/tagボタンなど）を行うことができるリッチウィジェットです。このカードの中にリンクを表示する必要があります（例えばnytimes.comのように実際に表示されるコンテンツの「ソース」）

ユーザーがクリックすると（またはタッチすると、コルドバ/モバイルアプリでもあるため）、カードカードアイテムのURLに移動し、カードアイテムをフルスクリーンで表示する必要があります（クリックがカードボタンにない限り...）

私はカードの周りのラッパーとしてリンク私は既にカードの中にソースリンクがあるのでseems illegalです：

Aエレメントの中にインタラクティブコンテンツを入れることはできません。インタラクティブコンテンツにはアンカータグが含まれます。

私はこのユースケースをどのように解決する必要がありますか？

非常に重要な点は、リンクに付いているデフォルトの一部を保持したいということです。中間のクリック/ ctrlをクリックすると新しいタブが開きます。 ...私はhistory.push使用することができます知っているが、これは非常に迷惑またはプレーンJS内のすべてのこれらのデフォルトを再実装してさえ不可能だ...

Answer 1

に注意することは非常に重要なことは、ということであるクロムの下部に表示私は、リンクをクリックすると、タブをクリックすると新しいタブで開くか、リンク上にあるリンクがChromeの下部に表示されるなど、リンクに付随する既定値の一部を保持したいと考えています。

まず最初に、これについて考えていることは素晴らしいことです。多くの開発者はいないが、ちょうどに行きます。「ああ、私はクリックハンドラをドロップして、 location.href、そしてそのことが扱っ&を行っています...」ユーザーの自分の慣れブラウザ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が表示されます...#fullcardviewと表示されます。コンテキストメニューから新しいタブに#likeまたは#fullviewを開くと、期待通りに機能するはずです。中間のクリック/ ctrl ...シバン全体。

---

さて、これはここでz-indexの非常に基本的な使用である...あなたの実際のカードの内容と構造に応じて、あなたはそれが仕事を得るためにもう少しを行う必要があります（カードのコンテンツAの残りの部分を与えるようにカードリンクよりも高いz-インデックス）

Z-インデックスは、スタック・コンテキストなどのようなものの詳細については、フィリップ・ウォルトンの優れた記事What No One Told You About Z-Indexをお勧めします。

---

なく、少なくとも最後に、私はデビッドHorvathのが彼のコメントで提起された懸念にやや同意する - それがリンクとして全体のカード行為というユーザーに予期しないかもしれません。彼らはf。テキストを選択した後、その選択肢をもう一度削除するか、その他の理由でクリックするだけです。おそらく、カードの一部をクリック可能にするだけの方が良い選択かもしれません。

（プラス、これはタッチデバイス上でどのように動作するか、ユーザーがちょうどページまたはピンチズームをスクロールしようとすると、またまだ確かにいくつかの調査/テストが必要。）