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

Question

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

事件似乎已经被正确委派并触发了它们的处理程序，但没有选择任何文本。我在这里提供了一个例子（链接），这只是问题的粗略简化。

几点注意事项：

1. 在Firefox中，如果你的选择从叠加层外开始，你仍然能够选择你想要的文本，即使它在叠加层下面
2. 当你在未覆盖区域有一个正常的选择并单击叠加层时，可以期望委派的mousedown事件将删除选择，但实际上不会发生

我是否错过了还应该委托的事件（我有mousedown、mousemove和mouseup）？或者浏览器是否采取某种安全措施来禁用这种行为（参见注释2）？有没有其他建议如何获得所需的结果？我知道我应该彻底解决当前的叠加层方案，但我已经对问题本身感到好奇。

- zatatatata

Answer 1

我已经找到了两个解决方案：

1. 使用“pointer-events” CSS 属性。但需要 IE 9.0 或更高版本。
2. 看起来 ExtJS 的开发人员通过事件转发解决了这个问题：演示，源代码，博客文章

- ionoy

Answer 2

我建议采用简单的技巧：将与文本相同内容的透明元素放在文本上方并覆盖。这是演示链接：http://jsfiddle.net/xwAdY/1/。

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

- bjornd

---

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