EonerCMS——做一個仿桌面系統的CMS（六）

事件冒泡

　　事件冒泡是個很常見的問題，不過我之前沒聽說過，是以這裡隻是做個筆記，如果了解事件冒泡，并清楚如何處理的，可以直接跳過這篇文章。下面我們看下這面這demo，點選紅色區域，會彈出1，點選灰色，會彈出2。

alert(2);

alert(1);

<code>$(</code><code>"#div1"</code><code>).click(</code><code>function</code><code>(){</code>

<code>    </code><code>alert(1);</code>

<code>});</code>

<code>$(</code><code>"#div2"</code><code>).click(</code><code>function</code><code>(){</code>

<code>    </code><code>alert(2);</code>

　　處理辦法其實很簡單，有兩種，一種就是“e.stopPropagation();”，另外一種就是“return false;”。

<code>$(</code><code>"#div2"</code><code>).click(</code><code>function</code><code>(e){</code>

<code>    </code><code>e.stopPropagation();</code>

　　或者：

<code>    </code><code>return</code> <code>false</code><code>;</code>

　　兩種解決辦法的差別就是，return false必須放在方法最後，不然之後的代碼也就不執行了，也就是說，當你把return false放在最頭部的時候，不僅阻止了事件往上冒泡，而且阻止了事件本身。

　　關于在EonerCMS裡哪裡會用到阻止冒泡呢，看下這張圖吧

　　由于title區域的拖動事件執行順序是mousedown-&gt;mousemove，是以在title區域裡的最大化、最小化等按鈕，他們的事件雖然是click，但click預設也執行了mousedown，是以這裡需要先統一阻止冒泡。

<code>//組織冒泡，之前對視窗綁定過事件</code>

<code>obj.find(</code><code>"a"</code><code>).bind(</code><code>"mousedown"</code><code>,</code><code>function</code><code>(e){</code>

   本文轉自胡尐睿丶部落格園部落格，原文連結：http://www.cnblogs.com/hooray/archive/2011/10/04/2198760.html，如需轉載請自行聯系原作者