Не уверен, что название выбрано правильно ...

Я пытаюсь смоделировать выделение текста в HTML / JS / CSS, чтобы избавиться от пузыря действий на мобильном устройстве при истинном выборе текста.

Чтобы быть более конкретным, я пытаюсь избежать этого:

Визуальный:

То, как я его построил, и это может измениться, потому что не имеет значения, что выбранный текст обернут внутриspan.selection и внутри этого тега также есть две каретки, используемые в качестве обработчиков:

Lorem ipsum dolor                            <!-- Unselected Text -->

<span class="selection">                     <!-- Start selection wrapper -->

  <span rel="previous" class="caret"></span> <!-- The left-side caret -->

  sit amet, consectetur                      <!-- The selected texts -->

  <span rel="next" class="caret"></span>     <!-- The right-side caret -->

</span>                                      <!-- End selection wrapper -->

adipiscing elit.                             <!-- Unselected Text -->

В идеале было бы интересно использовать drag-n-drop для выделения большего или меньшего количества текстов, но я считаю, что это будет чертовски сложно сделать, и в этом случае, возможно, с помощью щелчка мышью по знакам, чтобы выбрать предыдущее или следующее слово и обернуть его внутри.selection не будет так плохо.

Вот jsfiddle:http://jsfiddle.net/m6Qx4/

Окружающие тексты могут также содержать теги HTML, такие как:<i>, <b>, <span> а также<ul>/<li> может присутствовать, делая анализ труднее.

Есть идеи, как это можно сделать?

Status Update:

Мне действительно удалось заставить его работать с.click(); слушатель событий, использующий мои собственные методы jQuery.

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

Моя текущая ошибка состоит в перестановке красных кареток. Я пытался уничтожить их и добавить / добавить их обратно, и это все еще не работает. Это может быть ошибка в Firefox, которая не может правильно перезагрузить DOM после изменений, внесенных в текстовые узлы?

Reference: jsFiddle

Проверить рабочее состояниеjsFiddle.net из-за недавних отключений, посетите ихTweets.