Обработчик висит на элементе 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;
}
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;
}
Комментариев нет:
Отправить комментарий