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

Question

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

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

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

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

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

Answer 1

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

1. Свойство css указателя-события. Требуется IE 9.0+.
2. Похоже, ребята из ExtJS решили это путем переадресации событий: демо , источник , сообщение в блоге

Answer 2

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

PS: По моему опыту, любое решение в предложенной вами форме будет ужасным.Он будет страдать от несовместимости браузера, побочных эффектов от разметки и стиля окружения и т. Д.