У меня есть родительский div - .parent - с высотой 300 пикселей и шириной 200 пикселей (не имеет значения).
У меня есть элементы .child1, .child2, .child3 внутри .parent div, у каждого из них есть содержимое и высота / ширина (это просто для простоты, в каждом из них гораздо больше вложений). Все 3 дочерних элемента вместе занимают всю высоту контейнера родителя. (например, каждый ребенок имеет рост 100 пикселей).
У меня есть прослушиватель кликов на .parent div:
$('.parent').click(function (){
console.log("Parent div clicked");
});
Я заметил, что мой обработчик кликов .parent срабатывает только при нажатии на элементе .child3. Когда я нажимаю child1 или child2 - событие не вызывается.
Какие могут быть возможные причины, по которым родительский обработчик щелчков работает только при нажатии .child3 и не работает при нажатии на .child1, .child2?
Я не могу поделиться полным javascript / css этой проблемы, так как есть много ее, связанной с каждым дочерним и родительским элементами. Я просто хотел получить подсказку, где мне искать?
Первоначально я хотел сказать, что с .child1, .child2 связаны некоторые preventDefault/stopPropagation, которые не позволяют сработать клику на родительском элементе. Я не нашел никаких preventDefault, связанных с .child1 или .child2. Также проверено pointer-events тоже.
Что еще может повлиять на это? Z-индекс? позиция: абсолютная?
ОБНОВЛЕНИЕ: Я также добавил обработчик щелчка на документе, чтобы увидеть, какова цель, когда я нажимаю .child1 или .child2. Однако даже это событие не вызывается, когда я нажимаю .child1 или .child2. Это срабатывает, только если я нажимаю .child3 (так же, как для .parent).
$(document).click(function(event) {
console.log("Document click: " + event);
});