Как отловить клик вне области элемента jquery?

Question

Допустим при клике на текст вызывается функция которая позволяет редактировать блок текста, как при клике вне этого блока вызвать другую функцию для отправки изменений на сервер?

Answer 1

document.addEventListener('click', e => {
    e.target.classList.contains('class') ? func1() : func2;
})

Answer 2

Я бы сделал так: выдал бы каждому такому редактируемому блоку атрибут, скажем, data-editable с уникальным значением - рандомной строкой или индексом каким. Всем блокам с этим атрибутом выдал бы обработчик клика, который бы среди прочего записывал в глобальную переменную тот самый идентификатор из юзер-атрибута. При любом клике проверять наличие в event.target:data-ediatble нашего записанного ключа. Если он есть - игнор, если нет - отправка значения и отключение режима редактирования.

let nowEdittingBlockKey = '';

const startEdit = () => {
  if (nowEdittingBlockKey) return false;
  event.target.classList.add('editable__editMode');
  nowEdittingBlockKey = event.target.getAttribute('data-editable');
  document.addEventListener('click', endEdit);
}
const endEdit = (event) => {
  if (event.target.getAttribute('data-editable') === nowEdittingBlockKey) return false;
  document.querySelector(`[data-editable=${nowEdittingBlockKey}]`).classList.remove('editable__editMode');
  nowEdittingBlockKey = '';
  document.removeEventListener('click', endEdit);
}
const loadPage = () => {
  [...document.querySelectorAll('[data-editable]')].forEach(editable=>{
    editable.addEventListener('click', startEdit);
  });
}

#content {
  display: flex;
  flex-direction: column;
}
.editable {
  margin-top: 2em;
  width: 25%;
  height: 40vh;
  transition: box-shadow .5s ease-in-out;
}
.editable__editMode {
  box-shadow: 0 0 1em green;
}

<body onload=loadPage()>
  <div id='content'>
    <textarea data-editable='asfdihn' class='editable'></textarea>
    <textarea data-editable='asfsdxvhn' class='editable'></textarea>
    <textarea data-editable='acbvdren' class='editable'></textarea>
  </div>
</body>

БЛОГ НА HUSL

Как отловить клик вне области элемента jquery?

Ответы (2 шт):