用createEvent在另一個元素後面選擇文本

Question

我有一個場景，我有一些文本，應該是用戶可選的。問題是，在它上面有一個UI覆蓋層，這會阻止默認選擇文本。保持疊加並仍然能夠選擇文本的邏輯方法是使用合成事件（使用document.createEvent），但由於某種原因，它不能按預期工作。

這些事件似乎被正確委派並激發他們的處理程序，但沒有選擇文本。我有一個示例here，這是對問題的粗略簡化。

的幾個注意事項

1. 在FF，如果你開始覆蓋之外您的選擇，您仍然可以選擇你想要的文字，即使它的覆蓋
2. 當你有一個正常的下在未覆蓋區域的選擇和你點擊疊加，它就會從委託mousedown事件有望取消選擇，但它不會發生

我失去了我也應當委託的事件（有mousedown，mousemove和mouseup）？或者，瀏覽器是否會採取某種安全措施來禁用此類行爲（請參閱註釋2）？有關如何獲得預期結果的任何其他建議？我知道我應該完全解決當前的覆蓋解決方案，但我已經對這個問題本身感到好奇。

Answer 1

我已經發現了兩個方案來解決這個問題的副作用：

1. 「指針事件」 CSS屬性。但需要IE 9.0+。
2. 好像從ExtJS的人解決它通過事件轉發：demo，source，blog post

Answer 2

我會建議做一些簡單的訣竅：將透明元素與文本相同的內容放在文本本身和覆蓋層上。這裏是demonstration。

P.S .:從我的經驗來看，你提出的任何解決方案都是可怕的。它會從瀏覽器不兼容的痛苦，周圍的標記和造型等