Блог

Взгляните на этот (чрезмерно упрощенный) фрагмент:

HTML

 <div class="container">
    <button class="no-select">Button</button>
    Container Text
</div>
 

CSS

 .no-select {
    user-select: none; /* For comprehension sake, pretend this works for every browsers */
}
 

При нажатии, перетаскивании или двойном щелчке кнопки на рабочем столе она работает должным образом: текст внутри кнопки не подсвечивается.

Длительное нажатие кнопки на мобильном устройстве по-прежнему не выделяет текст внутри кнопки, а вместо этого начинает выделять текст родителя. Точнее, он выбирает следующую «выбираемую» вещь, которую он может. В этом случае это будет текст контейнера (Текст контейнера). Я тестировал только на iOS, кто-нибудь может подтвердить для других устройств?

Вы также можете увидеть это поведение на кнопках Material-UI. Длительное нажатие одной из кнопок на iOS, и вы увидите ошибку.

Как вы предотвращаете такое поведение?

Узлы в HTML-документе отображают большинство событий своему родителю (и последующим родителям), которые не фиксируются дочерним элементом. Это то, что вы видите.

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

 <div class="container">
  <button class="no-select">Button</button>
  <span class="container-text">Container Text</span>
</div>
 

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