event bubbling

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

  1. Chris

    Chris 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, Jul 30, 2011
    #1
    1. Advertisements

  2. John G Harris, Jul 31, 2011
    #2
    1. Advertisements

  3. Chris

    Chris Guest

    I'm very sorry about the multiple messages. I was using Google Groups
    to post - as my posts failed to appear I assumed that they had been
    completely lost, hence trying to post it again a few hours later each
    time to see if the problem had been resolved. At some point, Google
    must have recovered and caught up with itself and posted all messages
    that were queued.

    Apologies again.

    Chris
     
    Chris, Aug 5, 2011
    #3
  4. Chris

    RobG Guest

    It is pointless to direct posters to an FAQ that is not working and
    hasn't been reliable for many months.
     
    RobG, Aug 7, 2011
    #4
  5. It's working just now.

    And are you seriously suggesting that that section should be absent in
    the new, improved, FAQ when it comes out?

    John
     
    John G Harris, Aug 7, 2011
    #5
    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.