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

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

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

Несколько примечаний

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

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