了解javascript中的事件冒泡 [英] Understanding event bubbling in javascript

问题描述

我一直试图理解甚至冒泡，并且不太确定我完全遵循它。我开始阅读它，以便当用户开始将数据输入到表单中时，我可以在用户离开我的网站上的页面时发出警告（与StackOverflow类似的方式！）。

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 (in a similar way to StackOverflow does!).

以下代码似乎适用于跨浏览器：

The following code seems to work cross-browser:

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; 

然而，当我点击表单的提交按钮时，这也会被调用，我不会想。我尝试了各种代码添加，例如添加：

However, this also gets called when I click the submit button for the form, which I don't want. I've tried various additions to the code, such as adding:

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

然后将if（！d）改为if（！d&& ;提交== false）到主代码;但是，这个（以及仅在未单击提交按钮时尝试触发页面的所有其他组合）不起作用，当我单击提交按钮时仍然显示警告，或者在没有显示警告时显示警告点击任何东西！

and then changing if(!d) to if(!d && submitted==false) to the main code; however, this (and every other combination of trying to get the page to fire only if the submit button isn't clicked) doesn't work, with the warning either still showing when I click the submit button, or no warning being shown when anything is clicked!

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

This might boil down to the fact I don't understand the event bubbling process - I don't know why I need the e.cancelBubble = true; in the place I have it.

所以，我的两个主要问题是：

So, my 2 main problems are:

• 如何检查是否单击了提交按钮，如果没有单击则显示警告


• 并了解eventBubbling;例如：如果enteredData为true，那么我不会影响冒泡过程。我可以做？如果enteredData为false，e.cancelBubble = false，如果enteredData为true，则e.cancelBubble = true吗？关闭页面时设置e.cancelBubble的值实际上有什么影响？

我认为我不是正确的需要事件e.stopPropagation
，因为firefox支持事件冒泡？

Am I also correct in thinking I don't need the event e.stopPropagation at all, because firefox supports event bubbling?

长篇帖子道歉，并提前感谢任何人都能提供帮助给予。

Apologies for the long post, and thanks in advance for any help anyone is able to give.

谢谢，
Chris

Thanks, Chris

推荐答案

为了理解JS中的事件冒泡，我建议您使用Quirks模式事件简介。

For understanding event bubbling in JS, I recommend you the Quirks Mode Introduction to Events.

查看 http://www.quirksmode.org/js/events_order.html （还有关于该网站内事件的所有链接和部分）

Check out http://www.quirksmode.org/js/events_order.html (also all links and sections regarding events inside that site)

这篇关于了解javascript中的事件冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！