3

Обработчик висит на элементе 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>

JsFiddle

1 ответ 1

1

Для решения можно сделать проверку, что если выделен какой-то текст, то выйти из обработчика.

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

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.