Страницы

Поиск по вопросам

пятница, 12 июля 2019 г.

Не учитывать клик, при выделении

Обработчик висит на элементе main. При клике по элементам внутри main, если элемент (цель клика) является потомком блока message, к соответствующему блоку message добавляется/удаляется класс checked
Таким образом можно помечать сообщения, например для удаления.
Но вот в чем проблема: если я выделяю текст сообщения, то это считается за клик и сообщение выделяется. Я хочу чтобы при выделении текста в блоке message или его потомках (например body) блок message не обособлялся классом checked
То есть если я кликаю по любому содержимому блока message, то блок message выделяется (классом), а если я выделяю текст в блоке message, то ничего происходить не должно.
function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; } document.querySelector('.main').addEventListener('click', function(e) { var found = false; for (var i = 0; i < e.path.length; i++) { var elm = e.path[i]; if (hasClass(elm, 'message')) { found = true; break; } } if (!found) { return; } if (hasClass(elm, 'checked')) { elm.classList.remove('checked'); } else { elm.classList.add('checked'); } }); .message { background: yellow; } .checked { background: red; }

Lorem ipsum, qwerty! Если текст выделен - цвет не должен переключиться

JsFiddle


Ответ

Для решения можно сделать проверку, что если выделен какой-то текст, то выйти из обработчика.
Определить это можно с помощью свойства isCollapsed объекта Selection, который возвращает функция getSelection()
Например:
function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; } document.querySelector('.main').addEventListener('click', function(e) { if (!getSelection().isCollapsed) return; var found = false; for (var i = 0; i < e.path.length; i++) { var elm = e.path[i]; if (hasClass(elm, 'message')) { found = true; break; } } if (!found) { return; } if (hasClass(elm, 'checked')) { elm.classList.remove('checked'); } else { elm.classList.add('checked'); } }); .message { background: yellow; } .checked { background: red; }

Lorem ipsum, qwerty! Если текст выделен - клик отменен

Комментариев нет:

Отправить комментарий