How to create a clickable link within another

Question

I have a system where I need to create a href clickable link inside a div that is also clickable.

In summary I wanted to know if there is any way to create a "clickable link B" inside a "clickable link A". Since the "internal link B" has its click independent of the 'link A".

EX:

<a href="LINK_A">   <a href="LINK_B">Conteúdo do 2º link</a>   </a>

Answer 1

I will give an answer that I do not recommend you do. But it can solve your problem as a last resort.

You can put a <object> within your <a> and from there build your menu. So you can make a Hake and put one link inside the other.

But first see that according to W3C standards this should not be done: http://w3c.github.io/html/single-page.html#the-a-element

But if you want to do it anyway it should solve your problem. Again I do not recommend, but it stands as a reference.

OBS: the links don’t work inside the Snippet, but on your page it will work...

#menuHomeMaster {
    display: inline-block;
    width: 150px;
    height: 20px;
    overflow: hidden;
    transition: height 300ms ease;
}
#menuHomeMaster:hover {
    height: 60px;
}
object {
    display: inline-block;
    width: 150px;
}
a object a:hover {
    font-weight: bold;
}
a:hover {
    color: green;
}

<a  href="https://answall.com"  id="menuHomeMaster" target="_blank">Denúncia/Sugestão
    <object><a href="http://www.uol.com.br/" class="" target="_blank">link 1</a></object>
    <object><a href="http://www.globo.com.br/" class="" target="_blank">link 2</a></object>
</a>

A reference source for that case: https://stackoverflow.com/questions/9882916/are-you-allowed-to-nest-a-link-inside-of-a-link

Answer 2

Unfortunately, it is not possible. Put a anchor within another is against the specification:

12.2.2 Nested links are illegal

Link and Anchor defined by element A must not be nested; a element A shall not contain other elements A. (free translation)

You can at most put them side by side in the same hierarchy.

Answer 3

As already said, it is not recommended to use the tag <a> this way, but take a look at this Fiddle if you want to use like this:

https://jsfiddle.net/gyurjf5k/

You can get the result you need using preventDefault() and then opening the link you want.

document.querySelectorAll('a.clique').forEach(i => {

  i.addEventListener('click', ev => {

        ev.preventDefault();

    window.open(ev.currentTarget.getAttribute('href'), 'janela');

   //No seu código, em vez de window.open, 
   //você pode usar location.href = ev.currentTarget.getAttribute('href')  

  })

});