JavaScript - 偵測 contenteditable 元素底下子元素的事件 ( Detect event of child whose parent is a contentedtable element )

HTML5 提供 contenteditable 的屬性可以將普通的 HTML 元素變為可編輯的區域，但棘手的是一旦將該屬性加上後其內容均視為普通的文字。因此想要偵測該元素內的子元素的動作變得很麻煩，本篇將介紹兩個方法如何達到偵測子元素的動作。

我試圖想要在擁有 contenteditable 的元素底下去取得特定子元素的事件，範例參考如下：
JSFiddle : http://jsfiddle.net/JJ6tq/

經過幾番實驗發現，實際上 $("span") 可以取得該元素，但是綁定 keypress、keyup 時卻無法正常運作，但 click 的動作可正常綁定。一開始認為不成功的原因是 keypress 等事件只能綁定於可 focus 的元素，所以將父元素綁定事件嘗試結果可正常運作，推論 contenteditable 屬性賦予該元素可 focus 性質，因此將子元素也加上 contenteditable 並綁定，但結果還是失敗。最後經 Stack Overflow 找出解法，請參考如下：

JSFiddle : http://jsfiddle.net/V94rA/

上面列出的方法當然比較容易理解為將子元素獨立成一個可編輯的區域。但這樣的方法有點太冗長，因此另外找到一個方法，參考如下：

Stack Overflow 原文於此

JSFiddle : http://jsfiddle.net/Xp26G/

此方法也可以成功的達到當 keypress 發生時知道是哪個子元素在動作，但請注意原文中有提到其他瀏覽器的方法中的 anchorNode 並非萬無一失的方法，請自行參考作者所列出的相關連結並調整你的程式。