连续点击事件的问题

Question

我在理解特殊的Javascript事件场景时遇到问题.

有关说明,请参阅http://jsfiddle.net/UFL7X/

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

怎么解释？

Answer 1

所以发生的事情是你的事件正在冒泡.

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

如果你不希望这种情况发生,那么你需要return false在你的点击处理程序中div2

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

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

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

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