Выбор текста за другим элементом с помощью createEvent

У меня есть сценарий, где у меня есть текст, который должен выбираться пользователем. Проблема заключается в том, что поверх нее накладывается пользовательский интерфейс, что предотвращает выбор текста по умолчанию. Логичным способом сохранения наложения и возможностью выбора текста было бы использовать синтетические события (используйте document.createEvent), но по какой-то причине он не работает должным образом.

События, кажется, делегированы правильно и запускают их обработчики, но текст не выбран. У меня есть пример здесь, что является грубым упрощением проблемы.

Несколько заметок

В FF, если вы начинаете свой выбор за пределами наложения, вы все равно можете выбрать нужный текст, даже если он находится под наложением
Если у вас есть нормальный выбор в раскрытой области и вы нажмете наложение, от делегированного события mousedown ожидается удаление объекта, но этого не произойдет.

Мне не хватает события, которое также должно быть делегировано (у меня есть mousedown, mousemove и mouseup)? Или это какая-то мера безопасности браузерами, чтобы отключить такое поведение (см. Примечание № 2)? Любые другие предложения о том, как получить желаемый результат? Я знаю, что я должен полностью обойти текущее решение наложения, но мне уже очень интересно, какая проблема.

Ответ 1

Я нашел два решения для этой проблемы:

"свойство-указатель-события" css. Требуется IE 9.0+, хотя.
Кажется, ребята из ExtJS решили его переадресацией событий: demo, source, сообщение в блоге

Ответ 2

Я бы предложил сделать простой трюк: поставьте прозрачный элемент с тем же содержимым, что и текст поверх самого текста и наложения. Вот демонстрация .

P.S.: Из моего опыта любое решение в форме, которую вы предлагаете, будет ужасным. Он будет страдать от несовместимости браузера, побочных эффектов окружающих надбавок и стилей и т.д.