Как исключить потомка в селекторе jquery?

Question

[Konyuh]

Есть контент, подгруженный через ajax:

<div class="content">
        <div class="child"></div>
    </div>

К нему применяется:

$(document).on('click', '.content', function(){
    ...
});

Вопрос: как в данном примере средствами псевдоклассов jquery исключить потомка .child из селектора в методе on? Чтобы при клике на .child ничего не происходило. Пример ниже не работает:

$(document).on('click', '.content:not(.child)', function(){
    ...
});

Comments

[Ivan Ustûžanin]

если .child всегда дитё .content, а не находится где-то глубже, то .content > :not(.child) должно помочь

Answer 1

[Александр]

Добавьте

$(document).on('click', '.content .child', function(event){
    event.stopPropagation();
});

Comments

[historydev]

Тоже хотел предложить, затестил на jsfiddle, target всё ещё .child, как и лог выводится после клика на ребёнка.

[Александр]

historydev, может тогда так:

document.querySelector('#test').addEventListener('click', (event) => {
  if (event.target !== event.currentTarget) {
  	return;
  }
  
  console.log('click');
});

[Konyuh]

Спасибо! Все работает, вы очень помогли))

[Ivan Ustûžanin]

historydev,

test.onclick = e => {
  if (e.target.closest('.test22')) return;
  console.log(e.target.className, e.target.id)
}

[historydev]

IvanU7n, странно что погружение всё ещё работает, а проверить родителя не проблема, да

[Александр]

historydev, Погружение работает если его задать явно.

[historydev]

Александр, чтобы его остановить, нужно его запустить, интересно)

[historydev]

Александр, хотя даже так не работает

[historydev]

Александр,

test.addEventListener("click", function(e) {
	e.stopPropagation();
  console.log(e.target.className, e.target.id)
}, true);
test.addEventListener("click", function(e) {
	e.stopPropagation();
  console.log(e.target.className, e.target.id)
}, false);

С явно заданным работает:

test22.onclick = (e) => console.log('test22 log');

test.addEventListener("click", function(e) {
	e.stopPropagation();
  console.log(e.target.id)
}, true);

/* test.onclick = e => {
  e.stopPropagation();
  console.log(e.target.id)
} */