Обработчик висит на элементе 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;
}
<div class="main">
<div class="message">
<div class="body">Lorem ipsum, qwerty! Если текст выделен - цвет не должен переключиться</div>
</div>
</div>