Understanding event bubbling in Javascript

I've been trying to understand even bubbling, and not quite sure I completely follow it. I started reading about it so that I could warn users when they were leaving a page on my website if they had started to enter data into a form (in a similar way to Stack Overflow does!).

The following code seems to work 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; 

However, this also gets called when I click the submit button for the form, which I don't want. I've tried various additions to the code, such as adding:

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

and then changing if(!d) to if(!d && submitted==false) to the main code; however, this (and every other combination of trying to get the page to fire only if the submit button isn't clicked) doesn't work, with the warning either still showing when I click the submit button, or no warning being shown when anything is clicked!

This might boil down to the fact I don't understand the event bubbling process - I don't know why I need the e.cancelBubble = true; in the place I have it.

So, my two main problems are:

• how do I check if the submit button is clicked, and only show the warning if it isn't clicked
• and to understand eventBubbling; for example: if enteredData is true, then I'm not affecting the bubbling process. Should I be? Should I have e.cancelBubble=false if enteredData is false and e.cancelBubble=true if enteredData is true? What e开发者_JS百科ffect does setting the value of e.cancelBubble actually have when closing a page?

Am I also correct in thinking I don't need the event e.stopPropagation at all, because Firefox supports event bubbling?

What about having such code?

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

This should be called before the actual form submission i.e. before confirmLeave is running, so lowering the flag should do the trick.

Try removing the onbeforeunload "listener":

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

I don't think you need to worry about bubbling in this example...

return null if you want the browser to move on without asking the user, or return a string if you want the browser to show an alert asking the user if he wants to move on or not...

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

Bubbling and propagation only applies to event's that should notify it's children or it's parents, and as far as i know window.onbeforeunload is a global event that will not be propagated.

Unrelated to bubbling, but you could bypass detecting whether keys were pressed and check the form data instead:

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