Understanding event bubbling in javascript

Question

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 StackOverflow 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 2 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 effect 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?

Apologies for the long post, and thanks in advance for any help anyone is able to give.

Thanks, Chris

Answer 1

For understanding event bubbling in JS, I recommend you the Quirks Mode Introduction to Events.

Check out http://www.quirksmode.org/js/events_order.html (also all links and sections regarding events inside that site)

Answer 2

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.

Answer 3

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.

Answer 4

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