Zrozumienie propagacji zdarzeń w javascript

Question

Próbowałem zrozumieć nawet bulgotanie i nie jestem całkiem pewien, czy całkowicie go przestrzegam. Zacząłem o tym czytać, aby móc ostrzec użytkowników, gdy opuszczali stronę na mojej stronie, jeśli zaczęli wprowadzać dane do formularza (podobnie jak w StackOverflow!).

Poniższy kod wydaje się działać cross-browser:

var entereddata = false; 

$(document).ready(function() 
{ 
    $('#contactform').bind('keypress',function(e) { 
      if((e.which > 96 && e.which < 123) || (e.which > 47 && e.which < 58)) { 
        entereddata = true; 
        //alert(e.which); 
      } 
    }); 
}); 

function confirmLeave(e, d) 
{ 
    if(!e) e = window.event;//window.event; 
    if(!d) d = entereddata; 

    var confirmationMessage = 'It appears you have started to enter information into the contact form, but have not yet submitted it'; 

    if(!d) 
    { 
      e.cancelBubble = true; 
    } else 
    { 
      return confirmationMessage; 
    } 
} 

window.onbeforeunload=confirmLeave; 

Jednak to również jest wywoływana po kliknięciu w przycisk na formularzu, którego nie chcę. Próbowałem różne dodatki do kodu, takich jak dodawanie:

if($('#submit').click()){ 
    submitted=true; 
} else { 
    submitted=false; 
} 

a następnie zmieniając if (! D) if (! D & & składać == false) do głównego kodu; jednak ta (i każda inna kombinacja próbowania uruchomienia strony tylko wtedy, gdy przycisk przesyłania nie zostanie kliknięty) nie działa, a ostrzeżenie nadal jest wyświetlane po kliknięciu przycisku przesyłania lub nie jest wyświetlane ostrzeżenie, gdy wszystko jest kliknięte!

To może sprowadzić się do tego, że nie rozumiem procesu bąbelkowania zdarzeń - nie wiem, dlaczego potrzebuję e.cancelBubble = true; w miejscu, w którym go mam.

Więc, moi 2 główne problemy to:

• jak mogę sprawdzić, czy przycisk submit kliknięciu, a jedynie pokazać ostrzeżenie, jeśli nie zostanie kliknięty
• i zrozumieć eventBubbling; na przykład: jeśli inputData ma wartość true, to nie mam wpływu na proces propagacji. Czy powinienem być? Czy powinienem mieć e.cancelBubble = false, jeśli inputData ma wartość false, a e.cancelBubble = true, jeśli wprowadzona data jest prawdą? Jaki wpływ ma ustawienie wartości e.cancelBubble podczas zamykania strony?

Czy mam również rację, myśląc, że nie potrzebuję zdarzenia e.stopPropagation w ogóle, ponieważ Firefox obsługuje bąbelki zdarzeń?

Przeprosiny za długi wpis i dziękuję z góry za pomoc, którą każdy może udzielić.

Dzięki Chris

Answer 1

Co o konieczności takiego kodu?

$('#submit').click(function() { 
    entereddata = false; 
}); 

ta powinna zostać wywołana przed faktycznym złożeniem formularza tj przed confirmLeave jest uruchomiony, więc opuszczania flagi powinno załatwić sprawę.

Answer 2

Spróbuj usunąć onbeforeunload „słuchacza”:

$('#submit').click(function() { 
    window.onbeforeunload=null; 
}); 

nie sądzę trzeba się martwić o propagacji w tym przykładzie ...

zwróci null, jeśli chcesz, aby przejść na przeglądarkę bez pytania użytkownika, lub powrócić ciąg jeśli chcesz aby przeglądarka wyświetliła komunikat z prośbą użytkownika, czy chce przejść czy nie ...

function confirmLeave(e) { 
    e = e || window.event;//window.event; 

    var confirmationMessage = 'It appears you have started to enter information into the  contact form, but have not yet submitted it'; 

    if(entereddata) { 
      return confirmationMessage; 
    } else { 
      return null; 
    } 
} 

bulgotanie i propagacja odnosi się jedynie do przypadku” s, które powinny powiadomić o tym dzieci lub ich rodziców i o ile wiem, okienka.onbeforeunload jest wydarzeniem globalnym, które nie będzie propagowane.

Answer 3

niezwiązane z bulgotanie, ale można ominąć wykrywanie, czy zostały wciśnięte klawisze i sprawdzać dane formularza zamiast:

function hasNonemptyTextInputs() { 
    var textInputs = $('#contactform :input').filter(':text, textarea'); 

    // Check for any field with a nonempty value 
    // .is() returns true iff the function returns true on any element 
    return textInputs.is(function() { 
     return $(this).val().length > 0; 
    }); 
} 

Answer 4

dla zrozumienia zdarzenie propagacji w JS, polecam Ci Quirks Mode Wstęp na wydarzenia.

Zapoznaj się z http://www.quirksmode.org/js/events_order.html (również wszystkimi odsyłaczami i działami dotyczącymi wydarzeń w tej witrynie)