evento onclick su bottone non funziona se clicco su annulla nell'alert

[allin81]

Buongiorno
ho un bottone che quando lo premo chiedo prima conferma se si è sicuri

<button type="submit" id="invia-conferma-hotel-$id_prenotazione" name="invia-conferma-hotel-$id_prenotazione" class="btn btn-outline-success mb-2 me-4" onclick="return confirm('Sei Sicuro?')">INVIA CONFERMA ALL'HOTEL/PARTNER</button>

quando si apre l'alert escono i 2 pulsanti "annulla" e "ok"

Se clicco su "ok" il bottone fa correttamente quello che deve (aprire una pagina tramite ajax per inviare una email di conferma)

Ho notato pero' che anche se clicco su "annulla" questa pagina viene aperta

Come mai succede?

Per chiarezza scrivo anche il codice javascript che mi apre la pagina via ajax, non so se può dipendere da questo

<script>
$(document).ready(function(){
  $("#invia-conferma-cliente-<?=$id_prenotazione?>").click(function(){
    $.get("mail-conferma-cliente.php?id_prenotazione=<?=$id_prenotazione?>", function(data, status){
            $('#email-invia-conferma-cliente').html(data);
    });
  });
});
</script>

[KillerWorm]

Come mai succede?

Ciao, succede perché si tratta di due listener indipendenti l'uno dall'altro. Il return false (restituito col confirm), interrompe l'esecuzione dello script presente nella stessa funzione (cioè lo script definito per l'onclick) e previene il comportamento di default (cioè impedisce che avvenga il submit) ma NON interrompe la propagazione dell'evento click. Quindi i listener a seguire (definiti per quello stesso evento) continuano a funzionare normalmente perché l'evento click non è stato interrotto per loro.

Per interrompere l'esecuzione dei listener susseguenti, puoi usare il metodo stopImmediatePropagation() (dell'oggetto event).
Ovviamente dovrai sempre interrompere l'azione del submit usando il return false oppure il metodo preventDefault().
Una roba del genere:

<button type="submit" ... onclick="if(!confirm('Sei Sicuro?')){ event.preventDefault(); event.stopImmediatePropagation();}">INVIA...</button>

o col return, in questo modo:

<button type="submit" ... onclick="if(!confirm('Sei Sicuro?')){ event.stopImmediatePropagation(); return false;}">INVIA...</button>

Fai sapere

[allin81]

ciao
ho usato direttamente il secondo esempio ed ha funzionato alla grande.

Grazie sempre per i preziosi consigli/aiuti

[KillerWorm]

ho usato direttamente il secondo esempio ed ha funzionato alla grande.

Ottimo!
buon proseguimento