На iOS перестаёт работать выделение когда блок выезжает

Question

По непонятным мне причинам, именно когда блок открывается с помощью JS и на iOS, почему-то перестаёт работать выделение текста. Если же блок изначально уже открыт, то всё работает стабильно.

Почему так?

 $('.select-text').on('click touchstart', function(event) {
  event.preventDefault();

  var range, selection;
  var el = $(this)[0];

  if(window.getSelection) {
   selection = window.getSelection();

   range = document.createRange();
   range.selectNodeContents(el);

   selection.removeAllRanges();
   selection.addRange(range);
  } else if(document.body.createTextRange) {
   range = document.body.createTextRange();
   range.moveToElementText(el);
   range.select();
  }
 });

#markdown_help_block {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<a href="javascript://" onclick="$('#markdown_help_block').toggle('slow');">click</a>

<div id="markdown_help_block">
  <b class="select-text">*bold text*</b>
</div>

Answer 1

Уточните версию iOS и версию Safari.

А пока вот такая информация: Существуют особенности обработки событий касания (touchstart) и клика (click) в разных версиях Сафари.

Событие touchstart блокирует нативное поведение. Иными словами, когда используете event.preventDefault() в обработчике события touchstart, это может блокировать поведение сафари, связанное с выделением текста. Тогда можно попробовать условное применение preventDefault(), только когда это действительно необходимо, или полностью исключить.

В некоторых случаях, обработчик click может не срабатывать как надо после touchstart. Копайте в сторону Pointer Events API

БЛОГ НА HUSL

На iOS перестаёт работать выделение когда блок выезжает

Ответы (1 шт):