javascript - 连续点击事件

Question

我无法理解特殊的 Javascript 事件场景。

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

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

这怎么解释呢？

Answer 1

所以发生的事情是你的事件在 dom 中冒泡。

1. 点击发生在 div2
2. div2调用点击函数
3. 改变div1的颜色
4. 它将一个点击事件分配给 div1
5. div2 点击函数结束(隐含的return true)
6. 事件冒泡到 DOM 中的父级
7. div1 接收冒泡点击事件
8. div1 点击函数被调用

如果您不希望发生这种情况，则需要在 div2 的点击处理程序中返回 false

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

我建议你这样做(记住我不知道你的要求是什么):

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

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