카테고리 박스 링크

기여 버그
1

사용자가 보고한 문제이며, 확인 결과 해당 내용이 사실입니다.

카테고리 박스 설정.

모든 주요 카테고리가 박스로 표시되고 하위 카테고리가 박스 내부에 링크로 연결되는 최상위 레벨에서, 하위 카테고리를 클릭하면 해당 하위 카테고리로 이동하고, 박스의 다른 부분을 클릭하면 상위 카테고리로 이동합니다.
이것은 예상되는 동작입니다.

그러나…
…하위 카테고리를 마우스 오른쪽 버튼으로 클릭하고 브라우저 팝업 메뉴에서 "새 탭에서 링크 열기"를 선택하면, 원래 탭은 제자리에 남아 있는 채로 하위 카테고리가 새 탭에서 열리므로 예상대로 작동합니다. 여기까지는 문제없습니다.

하지만 새 탭에서 링크를 여는 표준 브라우저 단축키인 Ctrl+클릭 또는 Cmd+클릭을 사용하면 이상한 현상이 발생합니다.
하위 카테고리는 새 탭에서 올바르게 열리지만, 원래 탭은 상위 카테고리로 이동합니다.

여기서 일어나는 일은 박스 div에 <div ... data-url="주요 카테고리 링크">와 연결된 JQuery 액션이 있고, 하위 카테고리 링크는 일반적인 <a> 링크라는 것입니다.
마우스 오른쪽 버튼 클릭은 브라우저가 완전히 처리하여 정상적으로 작동합니다.
Ctrl+클릭은 브라우저가 새 탭에서 링크를 여는 용도로 가로채지만, 기본적인 왼쪽 클릭은 여전히 JQuery가 처리하도록 전달됩니다.

카테고리 내에서 표시되는 카테고리 박스에서 시도해 보면 비슷한 일이 발생합니다.

이 문제를 수정할 수 있을까요?

3개의 좋아요
2

이전에는 해당 메인 카테고리 링크를 일반 링크로 변경하는 방식으로 수정을 시도한 적이 있습니다.

하지만 중첩된 앵커 태그는 유효한 HTML이 아니며 일부 브라우저에서 문제를 일으킬 수 있어 해당 변경 사항을 적용하지 않았습니다.

다만 다른 기법을 시도해 볼 계획인데, 자세한 내용은 다음 링크에서 확인할 수 있습니다: Nested Links Without Nesting Links

해당 수정 방식은 박스 내부에 부모 카테고리를 가리키는 빈 링크를 배치한 뒤, 그 링크를 박스 전체에 맞게 확장하는 것입니다. 이렇게 하면 하위 링크들은 중첩되는 대신 해당 링크 위에 겹쳐진 레이어로 배치됩니다.

7개의 좋아요
3

정말 영리한 트릭이네요. 사라의 말은 다음과 같습니다.

개인적으로는 카테고리 박스에 대해서는 이것이 괜찮을 것 같습니다. 사용자가 무언가를 선택하여 복사하고 싶다면, 가장 그럴 가능성이 높은 것은 카테고리 제목과/또는 설명일 텐데, 박스를 클릭하여 카테고리를 열람하면 둘 다 사용할 수 있습니다(특히 Category Banners 구성 요소가 사용 중인 경우).

3개의 좋아요
4

음, 잘 작동할 것 같은데… 여기 업데이트했습니다

6개의 좋아요
5

이 주제는 마지막 답변 후 5일이 지나면 자동으로 닫힙니다. 새로운 답변은 더 이상 허용되지 않습니다.