连续点击事件

Question

我在理解一个特殊的Javascript事件场景时遇到了问题。

有关插图，请参阅http://jsfiddle.net/UFL7X/

当第一次单击黄色框时，我希望只调用第一个单击事件处理程序，并且大框变绿。但是这两个事件处理程序都被调用了(大盒子变红了)，即使在单击发生时第二个处理程序还不存在(至少我是这么想的)。

这怎么解释呢？

Answer 1

所以现在发生的情况是，你的事件正在dom上冒泡。

单击发生在div2

• div2上单击函数称为单击函数它改变div1

• it的颜色为单击函数分配一个单击事件div1

• div2单击函数结束(使用隐式的return true)

• event气泡向上显示DOM

• div1中的父单击接收气泡单击event

• div1单击函数称为

如果您不希望发生这种情况，那么您需要在div2的单击处理程序中使用return false

编辑:请注意，您组织JS的方式可能不是最好的，因为如果我单击div2 100次，这意味着div1现在将运行100个单击事件。

我建议您这样做(请记住，我不知道您的要求是什么)：

$("#div2").click(function() {
    $("#div1").css("background-color", "green");
    return false;
});

$("#div1").click(function() {
    $("#div1").css("background-color", "red");
});

Answer 2

这样做的原因是，当您单击#div2时，您也会跟踪#div1的点击。这可以通过在更改#div2单击的颜色后返回false来修复。有关工作版本，请参阅此jsFiddle：http://jsfiddle.net/mitchmalone/UFL7X/1/

$("#div1").live("click", function() {
    $("#div1").css("background-color", "red");
});

$("#div2").live("click", function() {
    $("#div1").css("background-color", "green");
    return false;
});