Link inside a div with onclick

Question

I have a div that when clicked displays an Alert to the user, but within this div there is also a link that when clicked directs the user to another page, more when I click on this link it displays before the Alert that is in the div, how can I ignore this warning by clicking on the link inside the div?

Following example;

.lista_endereco {
    background-color: #f4f4f4;
    padding: 14px;
    border-radius: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}
.lista_endereco:hover {
    background-color: #ddd;
}

<div class="lista_endereco" id="2" onclick="alert('oi');">
    <div style="width: calc(100% - 60px); font-size: 14px">
        <div style="float: left; width: 40px"></div>
        <div style="float: left; width: calc(100% - 40px)">
                    
            <div style="color:#000">Barão de Uchoa, 735</div>
            <div style="padding-top: 6px; color:#777">323 - Nilopoles , RJ - CEP 32113340</div>
            <div style="color:#777">Alves Silva - 21 971137601</div>
            
            <a href="http://uol.com.br">
                <div style="padding-top: 16px; color: #B12528">
                    <span style="padding-right: 14px;">Editar endereço</span>
                </div>
            </a>
                    
        </div>
        <div style="clear: both"></div>
    </div>
</div>

Answer 1

Your click event is triggered from the element that is clicked. Then the event "climbs" (bubbling) to the root of your document, being captured by all other ancestral elements of that clicked, and if these elements have a Handler function for the event onclick, the function will be invoked.

If you don’t want the event triggered on your link to go up, you can invoke the method stopPropagation in that event to stop its spread.

Example:

.lista_endereco {
    background-color: #f4f4f4;
    padding: 14px;
    border-radius: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}
.lista_endereco:hover {
    background-color: #ddd;
}

<div class="lista_endereco" id="2" onclick="alert('oi');">
    <div style="width: calc(100% - 60px); font-size: 14px">
        <div style="float: left; width: 40px"></div>
        <div style="float: left; width: calc(100% - 40px)">
                    
            <div style="color:#000">Barão de Uchoa, 735</div>
            <div style="padding-top: 6px; color:#777">323 - Nilopoles , RJ - CEP 32113340</div>
            <div style="color:#777">Alves Silva - 21 971137601</div>
            
            <a href="http://uol.com.br" onclick="event.stopPropagation()">
                <div style="padding-top: 16px; color: #B12528">
                    <span style="padding-right: 14px;">Editar endereço</span>
                </div>
            </a>
                    
        </div>
        <div style="clear: both"></div>
    </div>
</div>

Answer 2

<div class="lista_endereco" id="2" onclick="alert('oi');">
<div style="width: calc(100% - 60px); font-size: 14px">
    <div style="float: left; width: 40px"></div>
    <div style="float: left; width: calc(100% - 40px)">
                
        <div style="color:#000">Barão de Uchoa, 735</div>
        <div style="padding-top: 6px; color:#777">323 - Nilopoles , RJ - CEP 32113340</div>
        <div style="color:#777">Alves Silva - 21 971137601</div>
        
        <a onclick = "link(event)" href="http://uol.com.br">
            <div style="padding-top: 16px; color: #B12528">
                <span style="padding-right: 14px;">Editar endereço</span>
            </div>
        </a>
                
    </div>
    <div style="clear: both"></div>
</div>

<script>
    function link(event) {
        window.location = "http://uol.com.br";
        event.stopImmediatePropagation();
    }
</script>

i used javascript to put another onclick and call the link by a function that just after being clicked would disable the other events