앵커 태그 안에 앵커 태그 만들기

앵커 태그 안에 앵커 태그 만들기

---

무작위 테스트 중에 다른 앵커 태그 안에 앵커 태그를 넣는 동작을 보았습니다. 나는 jsfiddle을 만들었다 .

<a class="groupPopper">
     <a class="name"> content</a>
</a>​

그러나 개발자 도구에서는 다르게 보입니다.

내부 앵커를 클릭하면 허용되지 않아야하는 상위 앵커 태그에 대한 클릭 이벤트가 버블 링되므로 다른 앵커 태그 안에 앵커 태그를 넣을 수 없다고 생각합니다.

내 가정이 맞습니까?

---

@ j08691이 설명했듯이 중첩 된 a요소는 HTML 구문에서 금지됩니다. HTML 사양에는 이유가 없습니다. 그들은 단지 규칙을 강조합니다.

실용적인 측면에서 브라우저는 파싱 규칙에이 제한을 효과적으로 적용하므로 다른 많은 문제와 달리 사양을 위반하는 것은 작동하지 않습니다. 파서 <a>는 열린 a요소 내부 의 시작 태그를 새 요소를 시작하기 전에 암시 적으로 열린 요소를 종료하는 것으로 효과적으로 처리합니다 .

따라서를 작성 <a href=foo>foo <a href=bar>bar</a> zap</a>하면 중첩 된 요소가 생성되지 않습니다. 브라우저는이를 <a href=foo>foo</a> <a href=bar>bar</a> zap, 즉 두 개의 연속 된 링크 뒤에 일반 텍스트 로 파싱합니다 .

중첩 된 a요소 에는 본질적으로 비논리적 인 요소 가 없습니다 . "foo"또는 "zap"를 클릭하면 외부 링크가 활성화되고 "bar"를 클릭하면 내부 링크가 활성화되도록 구현할 수 있습니다. 그러나 나는 그러한 구조를 사용하는 이유를 보지 못했고, HTML 설계자들도 아마 그것을 보지 못했을 것이므로 그것을 금지하고 일을 단순화하기로 결정했습니다.

(내포 된 링크를 실제로 시뮬레이션하려면 일반 링크를 외부 링크로 span사용하고 적절한 이벤트 핸들러가 있는 요소를 내부 "링크"로 사용할 수 있습니다. 또는 링크를 복제 할 수 있습니다 <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)

---

중첩 된 링크는 불법입니다.

A 요소로 정의 된 링크 및 앵커는 중첩되지 않아야합니다. A 요소는 다른 A 요소를 포함하지 않아야합니다.

---

나는 있었다 같은 문제 @thinkbonobo 등을하고 자바 스크립트없이 할 수있는 방법을 발견 :

.outer {
  position: relative;
  background-color: red;
}
 
.outer > a {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
 
.inner {
  position: relative;
  pointer-events: none;
  z-index: 1;
}
 
.inner a {
  pointer-events: all;
}

<div class="outer">
  <a href="#overlay-link"></a>
  <div class="inner">
    You can click on the text of this red box. It also contains a
    <a href="#inner-link">W3C compliant hyperlink.</a>
  </div>
</div>

트릭은 전체 .outerdiv를 덮는 앵커를 만든 다음 내부 div의 다른 모든 앵커에 양수 z-index값을 제공하는 것입니다. 전체 크레딧은 https://bdwm.be/html5-alternative-nested-anchor-tags/에 있습니다.

---

버튼이있는 div 패널을 클릭 할 수 있도록 만들려고 할 때이 문제를 발견했습니다. 내가 권장하는 해결 방법은 자바 스크립트 이벤트를 사용하는 것입니다.

여기 내가 만든 코드 펜 예제가 있습니다 .... http://codepen.io/thinkbonobo/pen/gPxJGV

여기에 html 부분이 있습니다.

링크에 포함 된 링크의 예 ....

<div class=panel onclick="alert('We\'ll hi-ii-ii-ide')">
  If you say run<br>
  <button onclick="app.hitMe(event)">more</button><br>
  <br>
  And if you say hide...<br>
</div>

내부 링크에 대한 이벤트가 캡처되고 stopPropagation ()이 사용되는 방법을 확인하십시오. 이것은 외부 트리거가 실행되지 않도록하는 데 중요합니다.

---

you can use object tag to solve this problem. such as

<a><object><a></a></object></a>

---

It is invalid HTML.

You can't nest a elements.

So, by definition, the behaviour is undefined.

---

For nested anchors, to prevent the inner event from bubbling up to the outer event, you want to stop propagation as soon as the inner event is clicked.

OnClick of inner event, use e.stopPropagation();

---

Don't do it like that. I was facing the same issue in my app. You can simply add <div> tag in top and <a> tags at child level. something like:

<div id="myDiv"><a href="#"></a>
     <a href="#"></a>
</div>

make sure you add click event for myDiv in your script file as well.

window.location.href = "#dashboardDetails";

---

You cannot nest 'a' tags. Instead set outer container as 'position:relative' and second 'a' as 'position:absolute' and increase its z-index value. You'll get the same effect.

<div style="position:relative">
<a href="page2.php"><img src="image-1.png"></a>
<a style="position:absolute;top:0;z-index:99" href="page1.php"></a>
</div>

---

나는 그것이 오래된 게시물이라는 것을 알고 있지만 user9147812 답변이 다른 제안보다 더 잘 작동했음을 지적하고 싶습니다. 이것이 내가 모든 것을 쌓은 방법입니다.

    <style>
    * {
      padding: 0;
      margin: 0 border:0;
      outline: 0;
    }

    .outer_anchor {
      display: inline-block;
      padding: 5px 8px;
      margin: 2px;
      border: 1px solid #252632;
      border-radius: 3px;
      background: #1c1d26;
      color: #fff;
      text-shadow: 0 1px 0 #616161;
      box-shadow: 1px 1px 3px #000;
      transform: translateY(0);
      transition: background 250ms;
    }
    .inner_anchor {
      display: inline-block;
      padding: 5px 8px;
      margin: 2px;
      border: 1px solid #252632;
      border-radius: 3px;
      background: #1c1d26;
      color: #fff;
      transform: translate(0px);
    }
    .inner_anchor:hover {
      background: #647915;
    }
    </style>


<a href="#">ItemX<object><a class="elim_btn" href="#" title='Eliminate'>&times;</a></object></a>

---

이것은 나쁜 코딩 방법이지만 시도해 볼 수 있습니다.

<a href="1"> aaaa <table> <tr> <td> <a href="2"> bbbb </a> </ td> </ tr> </ table> </a>

참고 URL : https://stackoverflow.com/questions/13052598/creating-anchor-tag-inside-anchor-tag