event bubbling

Discussion in 'Javascript' started by Chris W, Jul 30, 2011.

  1. Chris W

    Chris W Guest

    Hello everyone,

    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.

    I initially used the following used the following code based on [1]

    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 goodbye(d,e) {
    if(!e) e = window.event;
    if(!d) d = entereddata;

    if(d)
    {
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed
    on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
    e.stopPropagation();
    e.preventDefault();
    }
    }
    }
    window.onbeforeunload=goodbye;

    but, this didn't work in Chrome. After a bit of googling and hacking
    apart other code I found, I've found that this seems to work and is
    cross-browser compatible:

    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;

    This works like I want. But, 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?

    Thanks in advance,
    Chris

    [1] http://www.openjs.com/scripts/events/exit_confirmation.php
     
    Chris W, Jul 30, 2011
    #1
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.