13

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

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

几点注意事项

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

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

4

2 回答 2

7

对于这个问题，我找到了两种解决方案：

  1. “指针事件” css 属性。不过需要 IE 9.0+。
  2. 似乎来自 ExtJS 的人通过事件转发解决了它：demo , source , blog post
于 2012-01-09T15:18:40.497 回答
2

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

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

于 2012-01-09T14:53:14.763 回答