連續點擊事件的問題

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點擊功能被稱爲

，如果你不希望這種情況發生，那麼你需要return false在點擊處理程序div2

編輯：請注意方式你正在組織你的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; 
});