理解Javascript中的事件冒泡

我一直试图理解甚至冒泡，但不太确定我是否完全理解它。我开始阅读它，以便在用户离开我的网站页面时，如果他们开始在表单中输入数据，我可以警告他们（类似于堆栈溢出的方式！）

以下代码似乎可以跨浏览器工作：

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（！d）

更改为

if（！d&&submitted==false）

为主代码；但是，这（以及只有在未单击submit按钮时才尝试启动页面的其他组合）不起作用，当我单击submit按钮时，警告仍然显示，或者在单击任何内容时都不显示警告

这可能归结为我不理解事件冒泡过程——我不知道为什么我需要

e.cancelBubble=true在我拥有它的地方

因此，我的两个主要问题是：


如何检查是否单击了提交按钮，并且仅在未单击时显示警告
以及了解泡沫；例如：如果
enteredData
为true，则我不会影响冒泡过程。我应该是吗？如果
enteredData
为false，我是否应该使用
e.cancelBubble=false
，如果
enteredData
为true，我是否应该使用
e.cancelBubble=true
？关闭页面时，设置
e.cancelBubble
的值实际上有什么影响

我认为我不需要事件
e.stopPropagation
因为Firefox支持事件冒泡？
有这样的代码怎么样

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

这应该在实际表单提交之前调用，即在运行
confirmLeave
之前，因此降低标志应该可以做到这一点。
尝试删除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是一个不会传播的全局事件。
与冒泡无关，但您可以绕过检测是否按下键，改为检查表单数据：

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

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

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