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

我有一个场景，其中有一些文本，应该是用户可选择的。问题是，上面有一个UI覆盖，这会阻止默认情况下选择文本。保持覆盖并仍然能够选择文本的逻辑方法是使用合成事件（使用

document.createEvent

），但由于某些原因，它无法按预期工作

事件似乎已正确委派并触发其处理程序，但未选择任何文本。我举了一个例子，它粗略地简化了这个问题

一些注释

在Firefox中，如果您在覆盖层之外开始选择，您仍然可以选择所需的文本，即使它位于覆盖层之下

当您在未覆盖区域中有一个正常的选择，并单击覆盖时，将从委派的

mousedown

事件中删除该选择，但不会发生

---

我是否错过了一个也应该委派的事件（我有

mousedown

、

mousemove

和

mouseup

）？或者浏览器禁用这种行为是一种安全措施（参见注释2）？关于如何获得预期结果，还有其他建议吗？我知道我应该完全围绕当前的覆盖解决方案工作，但我已经对问题本身感到好奇。

我建议做一个简单的技巧：将与文本内容相同的透明元素放在文本本身和覆盖的顶部。这是你的电话号码

---

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

我找到了两种解决此问题的方法：

“指针事件”css属性。但需要IE 9.0+版本

似乎ExtJS的人通过事件转发解决了这个问题：

---

从技术上讲，createEvent应该是完全跨浏览器的，我看不出样式如何影响本机浏览器行为，本机浏览器行为应该与本机事件和合成事件相同。