Ho appena testato questo comportamento in diversi browser, tutti i browser hanno dato gli stessi risultati, ecco la mia conclusione:
<!-- submit button inside form -->
<form method="post">
<input type="submit" value="submit" /> <!-- onclick = submitted to same page -->
<input type="submit" value="submitNredirect" onclick="document.location.href='http://www.google.com';" /> <!-- onclick = submitted to same page, ignored redirect -->
</form>
<!-- submit button without form -->
<input type="submit" value="submit" /> <!-- onclick = no submit or redirect occur -->
<input type="submit" value="submitNredirect" onclick="document.location.href='http://www.google.com';" /> <!-- onclick = redirect -->
Come sapete, javascript è lineare, esegue la riga di codice che viene prima. Diciamo che abbiamo questa forma:
<form id="myform" method="post" onsubmit="alert('onsubmit');">
<input id="mybtn" type="submit" value="submit" onclick="alert('onclick');" />
</form>
<script>
$(document).ready(function() {
$('#mybtn').bind('click', function() {
alert('bind click');
});
$('#myform').bind('submit', function() {
alert('bind submit');
});
// onclick > bind click > onsubmit > bind submit
});
</script>
Sul clic sul pulsante, gli eventi legati al pulsante si verifica per primo (gli eventi "click"), poi gli eventi legati alla forma verifica successiva ("Invia" eventi). Il risultato è il seguente:
- avviso: onclick
- avviso: bind clic
- avviso: onSubmit
- avviso: bind presentare
- modulo di presentazione
Se si include qualsiasi codice di reindirizzamento in una qualsiasi delle funzioni, il reindirizzamento verrà ignorato e si verificherà l'invio, credo che javascript sovrascriva lo document.location.href con il processo di post modulo, la "sottomissione modulo" è come una riga di codice implicita/nascosta alla fine dello script, se non si esegue return false; a un certo punto, questa riga implicita/nascosta viene eseguita.
Non sono un esperto, ma è quello che ho capito dopo alcuni test. Per favore correggimi se sbaglio.
MODIFICA: Che cosa succede se includiamo un document.location.href in ogni funzione?in questo modo:
<form id="myform" method="post" onsubmit="document.location.href='http://www.onsumbit.com';">
<input id="mybtn" type="submit" value="submit" onclick="document.location.href='http://www.onclick.com';" />
</form>
<script>
$(document).ready(function() {
$('#mybtn').bind('click', function() {
document.location.href='http://www.bindclick.com';
return false;
});
$('#myform').bind('submit', function() {
document.location.href='http://www.bindsumbit.com';
});
});
</script>
Lo stato del valore di stringa di cambiamenti "href" come segue (ma esegue il reindirizzamento al termine dello script):
- document.location.href = 'http://www.onclick.com' ;
- document.location.href = 'http://www.bindclick.com';
- document.location.href = 'http://www.onsubmit.com';
- document.location.href = 'http://www.bindsubmit.com';
- document.location.href = '/'; // modulo di presentazione
- javascript, non reindirizzare sulla base del valore stringa "href"
ma abbiamo return false; dopo # 2, il che significa che farà reindirizzamento per "http://www.bindclick.com"
Vedere [Prevent default su Form Submit jQuery] (http://stackoverflow.com/q/6462143/11683) e [event.preventDefault() vs. return false] (http://stackoverflow.com/q/ 1357118/11683). – GSerg
So che return false impedirebbe l'invio, e in tal caso il reindirizzamento avviene. Ma perché il reindirizzamento non si verifica in questo caso? Cosa lo ferma? – GendoIkari
Puoi ri-produrre questo in un [jsfiddle] (http://jsfiddle.net/) e anche dirci con quale browser stai provando? –