Понимание событий пузырей в JavaScript

Question

Я пытался понять даже пузыриться, и не совсем уверен, что полностью следую этому.Я начал читать об этом, чтобы я мог предупреждать пользователей, когда они покидают страницу на моем веб-сайте, если они начали вводить данные в форму (аналогично тому, как это делает StackOverflow!).

Следующий кодКажется, работает кросс-браузер:

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; 

Однако, это также вызывается, когда я нажимаю кнопку отправки для формы, которая мне не нужна.Я пробовал различные дополнения к коду, такие как добавление:

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

и затем изменение if (! D) на if (! D && submit == false) к основному коду;однако это (и любая другая комбинация попыток заставить страницу срабатывать, только если кнопка отправки не нажата) не работает, при этом предупреждение либо отображается при нажатии кнопки отправки, либо предупреждение не отображается причто-нибудь нажимается!

Это может сводиться к тому, что я не понимаю процесс всплытия событий - я не знаю, зачем мне нужен e.cancelBubble = true;там, где он у меня есть.

Итак, две мои основные проблемы:

• как мне проверить, нажата ли кнопка отправки, и показать предупреждение, только если это не так?t нажал
• и понял eventBubbling;например: если значение inputData равно true, то я не влияю на процесс барботирования.Должна ли я быть?Должен ли я иметь значение e.cancelBubble = false, если значение inputData равно false, и значение e.cancelBubble = true, если значение inputData равно true?Какой эффект имеет установка значения e.cancelBubble при закрытии страницы?

Правильно ли я также считаю, что событие e.stopPropagation мне вообще не нужно, потому что firefox поддерживает всплывающее окно событий?

Извиняюсь за длинный пост, и заранее благодарен за любую помощь, которую кто-либо может оказать.

Спасибо, Крис

Answer 1

Для понимания всплытия событий в JS, я рекомендую вам ознакомление с событиями в режиме Quirks.

Извлечение http://www.quirksmode.org/js/events_order.html (также все ссылки и разделы, касающиеся событий внутри этого сайта)

Answer 2

Попробуйте удалить onbeforeunload "listener":

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

Я не думаю, что вам нужно беспокоиться о пузырях в этом примере ...

вернуть ноль, если вы хотите, чтобы браузер продолжал работу, не спрашивая пользователя, или вернуть строку, если вы хотите, чтобы браузер отображал предупреждение, спрашивающее пользователя, хочет ли он перейти или нет ...

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

Пузырьки и распространение относятся только к событиям, которые должны уведомлять своих детей или родителей, и насколько я знаю, window.onbeforeunload является глобальным событием, которое не будет распространяться.

Answer 3

Не связано с пузырями, но вы можете обойти обнаружение нажатия клавиш и вместо этого проверить данные формы:

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

А как насчет такого кода?

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

Это следует вызывать перед фактической отправкой формы, т. Е. Перед запуском confirmLeave, поэтому снижение флага должно помочь.