了解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 && submitted == false)到主代码; 但是,这个(以及仅在未单击提交按钮时尝试触发页面的所有其他组合)不起作用,当我单击提交按钮时仍然显示警告,或者在没有显示警告时显示警告点击任何东西!

这可能归结为我不理解事件冒泡过程的事实 - 我不知道为什么我需要e.cancelBubble = true; 在我拥有它的地方.

所以,我的两个主要问题是:

• 如何检查是否单击了提交按钮,如果未单击提示按钮,则仅显示警告
• 并了解eventBubbling; 例如:如果enteredData为true,那么我不会影响冒泡过程.我可以做？如果enteredData为false,e.cancelBubble = false,如果enteredData为true,则e.cancelBubble = true吗？关闭页面时,设置e.cancelBubble的值实际上有什么影响？

我还认为我根本不需要事件e.stopPropagation,因为firefox支持事件冒泡吗？

为长篇大论道歉,并提前感谢任何人都能给予的帮助.

谢谢,克里斯

Answer 1

如果有这样的代码呢？

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

这应该在实际的表单提交之前调用，即在confirmLeave运行之前调用，因此降低标志应该可以解决问题。