使用 createEvent 选择另一个元素后面的文本

Question

我有一个场景，我有一些文本，应该是用户可选择的。问题是，它上面有一个 UI 覆盖，默认情况下会阻止选择文本。保持覆盖并仍然能够选择文本的合乎逻辑的方法是使用合成事件（使用document.createEvent），但由于某种原因，它不能按预期工作。

这些事件似乎被正确委派并触发了它们的处理程序，但没有选择任何文本。我有一个例子here，这是对问题的粗略简化。

一些笔记

1. 在 Firefox 中，如果您在覆盖层之外开始选择，您仍然可以选择所需的文本，即使它位于覆盖层之下
2. 当您在未覆盖区域中进行正常选择并单击覆盖时，委托的mousedown 事件预计会删除选择，但不会发生

我是否错过了也应该委派的事件（我有 mousedown、mousemove 和 mouseup）？或者浏览器是否采取了某种安全措施来禁用此类行为（请参阅注释 nr 2）？关于如何获得所需结果的任何其他建议？我知道我应该完全解决当前的覆盖解决方案，但我已经对问题本身感到好奇。

Answer 1

我已经找到了两个解决这个问题的方法：

1. “指针事件”css 属性。不过需要 IE 9.0+。
2. 似乎来自 ExtJS 的人通过事件转发解决了它：demo，source，blog post

Answer 2

我建议做一个简单的技巧：将与您的文本内容相同的透明元素放在文本本身的顶部并覆盖。这是demonstration。

P.S.：根据我的经验，您建议的任何解决方案都会很糟糕。它将受到浏览器不兼容、周围标记和样式等副作用的影响。