カテゴリボックスのリンク

ユーザーからこの問題が報告されました。確認したところ、報告内容は事実でした。

カテゴリボックスの設定について。

最上位レベルにはすべての主要カテゴリがボックス表示され、そのボックス内にサブカテゴリへのリンクが配置されています。サブカテゴリをクリックするとそのサブカテゴリへジャンプし、ボックス内の他の部分をクリックすると親カテゴリへジャンプします。これは期待通りの動作です。

しかし…
…サブカテゴリを右クリックし、ブラウザのポップアップメニューから「新しいタブでリンクを開く」を選択すると、期待通り元のタブはそのままで、サブカテゴリが新しいタブで開きます。ここまでは問題ありません。

ところが、標準的なブラウザショートカットである Ctrl+Click または Cmd+Click(右クリックで新しいタブを開く操作に相当)を使用すると、奇妙な現象が発生します。
サブカテゴリは正しく新しいタブで開きますが、元のタブは親カテゴリへジャンプしてしまいます。

おそらく、ボックスの div 要素に <div ... data-url="メインカテゴリへのリンク"> というデータ属性が設定され、JQuery のアクションが関連付けられているため、サブカテゴリへのリンクは従来の <a> タグで実装されていることが原因ではないでしょうか。
右クリックはブラウザが完全に処理するため正常に動作しますが、Ctrl+Click はブラウザが新しいタブでのリンク開きを処理するためにフックされますが、基本的な左クリックのイベントは引き続き JQuery によって処理されてしまいます。

カテゴリ内に表示されるカテゴリボックスでも同様の現象が発生します。

この問題は修正可能でしょうか?

「いいね!」 3

以前、そのメインカテゴリリンクを通常のリンクにするだけで修正を試みました。

…しかし、ネストされたアンカータグは有効な HTML ではなく、一部のブラウザで問題を引き起こすため、その変更は結局採用されませんでした。

ただし、別の手法を試してみます。詳細は以下で説明されています:Nested Links Without Nesting Links

この修正では、親カテゴリへの空のリンクをボックス内に配置し、そのリンクをボックス全体に広がるように拡張します。これにより、すべてのサブリンクはそのリンクの上にレイヤーとして配置され、ネストされることはありません。

「いいね!」 7

それはなかなか巧妙な手ですね。サラはこう述べています:

個人的には、カテゴリボックスであればおそらく問題ないと思います。ユーザーが何かを選択してコピーしたい場合、それはカテゴリのタイトルや説明である可能性が高く、どちらもボックスをクリックしてカテゴリを表示することで利用可能です(特に Category Banners コンポーネントが関与している場合など)。

「いいね!」 3

はい、うまくいきそうですね…こちらで更新しました

「いいね!」 6

このトピックは、最後の返信から 5 日後に自動的に閉鎖されました。新しい返信は受け付けていません。