Запрет и разрешение на выделение текста, функции setUnselectable () и setSelectable ()

Функции позволяют мгновенно запретить или разрешить выделение текста на любом DOM-узле. Это полезно, когда вы создаёте drag-and-drop-интерфейсы, интерактивные меню или карточки, где случайная подсветка портит UX.

BX.setUnselectable() и BX.setSelectable() — быстрый и надёжный способ держать интерфейс «чистым» от случайной подсветки текста.

// запрещает выделение всего, что находится внутри node
BX.setUnselectable(node);
// возвращает стандартное поведение
BX.setSelectable(node);

• node — DOM-элемент или его id.
• Работают сразу после вызова, без ожидания BX.ready, если элемент уже присутствует в DOM.
• Учитывают все вендорные префиксы (-webkit-, -ms-, -moz-) и добавляют обработчик selectstart для старых IE, поэтому кросс-браузерность уже «вшита».

Запрет выделения заголовка

<h1 id="page-title">CRM и интеграции</h1>
<script>
BX.ready(function () {
    BX.setUnselectable(BX('page-title'));
});
</script>

Массовая обработка коллекции элементов

<ul id="sidebar">
    <li class="sidebar-item">Пункт 1</li>
    <li class="sidebar-item">Пункт 2</li>
    <li class="sidebar-item">Пункт 3</li>
</ul>
<script>
BX.ready(function () {
    /* Ищем ВСЕ дочерние элементы с классом .sidebar-item */
    var items = BX.findChildren(BX('sidebar'), {className: 'sidebar-item'}, true);
    /* Кросс-браузерный классический цикл */
    for (var i = 0; i < items.length; i++) {
        BX.setUnselectable(items[i]);
    }
});
</script>