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

Question

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

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

一些注意事项

1. 在FF中如果您在叠加层之外开始选择，您仍然可以选择所需的文字，即使它位于叠加层下
2. 如果您在未覆盖区域中进行了正常选择并且单击了叠加层，则可以从委派的mousedown事件中删除选择，但不会发生此选择

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

Answer 1

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

1. “pointer-events”css属性。虽然需要IE 9.0+。
2. 似乎来自ExtJS的人通过事件转发解决了这个问题：demo，source，blog post

Answer 2

我建议做一个简单的伎俩：将透明元素与文本相同的内容放在文本本身的顶部并叠加。这是demonstration。

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