Perché Internet Explorer non attiva in modo coerente l'evento di invio?

Question

Trovato un bug apparente in Internet Explorer oggi, ma incapace di verificare tramite ricerca. Qualcuno ha incontrato questo e/o può spiegare per favore?

Sinossi

Internet Explorer (almeno 9 e 11) non sempre trigger (o gestire?) L'evento di invio. Notato un caso in cui facendo clic su pulsante di invio un po 'rapidamente causa alcuni invii da saltare. Questo problema non è stato notato in Chrome e Firefox.

Test case

• forma semplice con ingresso singolo e singolo pulsante di invio.
• gestore Javascript sulla forma di conferma: visualizzazione submit, e poi tornare falsa
• Javascript maniglie click del pulsante di invio: Display click
• jQuery utilizzato per chiarezza (stesso problema si nota con una soluzione equivalente non jQuery)
• Per eseguire il test, l'utente deve fare doppio clic sul pulsante Invia e osservare quali eventi sono gestiti.

Risultati del test

Firefox e Chrome funzionano come previsto:

click 
submit 
click 
submit 

Internet Explorer fa qualcosa di strano (come al solito):

click 
submit 
click 

non c'è secondo submit ! Solo con IE, il gestore client non viene chiamato e Fiddler mostra che la richiesta non si verifica mai nell'ambiente di produzione. (Si noti che questo codice di esempio in realtà non POST la richiesta però, a causa di return false.)

snippet di lavoro: scorrere verso il basso e fare clic su Esegui frammento, quindi provare a fare doppio clic sul pulsante Invia e osservare i risultati. JSFiddle

feedback = function (t) { 
 
    $div = $("<div class='line'></div>"); 
 
    $div.html(t); 
 
    $("#feedback").append($div); 
 
}; 
 
$("#theForm").on("submit", function (e) { 
 
    feedback("submit"); 
 
    return false; // don't actually submit form, or SO chokes 
 
}); 
 
$("#btnSubmit").on("click", function (e) { 
 
    feedback("click"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id='theForm' action="DISABLED BY RETURN FALSE" method="POST"> 
 
    <input type='text' /> 
 
    <input id='btnSubmit' type='submit' /> 
 
</form> 
 
<div id='feedback'></div>

Answer 1

Non sei sicuro di ciò che si sta cercando di raggiungere con questo, ma credo che si sta cercando di evitare la doppia osservazioni della forma? In tal caso, potresti usare qualcosa del tipo:

feedback = function (t) { 
    $div = $("<div class='line'></div>"); 
    $div.html(t); 
    $("#feedback").append($div); 
}; 
$("#theForm").on("submit", function (e) { 
    feedback("submit only once"); 
    $(this).find("#btnSubmit").attr("disabled", "disabled"); 
});