Dlaczego Internet Explorer nie uruchamia konsekwentnie zdarzenia przesyłania?

Question

Znaleziono oczywisty błąd w przeglądarce Internet Explorer, ale nie można go zweryfikować za pomocą badań. Czy ktoś to napotkał i/lub może wyjaśnić?

Synopsis

Internet Explorer (przynajmniej 9 i 11) nie zawsze wywołać (lub uchwyt?) Submit zdarzenia. Zauważyliśmy przypadek, w którym szybkie kliknięcie przycisku Wyślij powoduje, że niektóre przesyłki są pomijane. Ten problem nie występuje w przeglądarkach Chrome i Firefox.

przypadek testowy

• Prosta forma z jednego wejścia i jednego przycisku przedstawienia.
• Javascript obsługi na formularzu przedłożyć: wyświetlacz submit, a następnie return false
• JavaScript uchwyty na kliknięcie przycisku submit: display click
• jQuery używane dla jasności (ten sam problem jest niezauważalny z równoważnego rozwiązania non-jQuery)
• Aby wykonać test, użytkownik musi szybko kliknąć dwukrotnie przycisk Prześlij i obserwować, które zdarzenia są obsługiwane.

Wyniki testów

Firefox i Chrome działa zgodnie z oczekiwaniami:

click 
submit 
click 
submit 

Internet Explorer robi coś dziwnego (jak zwykle):

click 
submit 
click 

nie ma drugiego przedstawienia ! Tylko w przypadku IE, procedura obsługi klienta nie jest wywoływana, a Fiddler pokazuje, że żądanie nigdy nie występuje w środowisku produkcyjnym. (Zwróć uwagę, że ten przykładowy kod faktycznie nie powoduje POST żądania, ze względu na return false.)

Fragment pracy: przewiń w dół i kliknij Uruchom fragment, a następnie spróbuj dwukrotnie kliknąć przycisk Prześlij i obserwuj wyniki. 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

Nie jestem pewien, co chce osiągnąć z tego, ale zgaduję, staramy się uniknąć podwójnych zgłoszeń formularza? W takim przypadku możesz użyć czegoś takiego:

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"); 
});