Как сделать так, чтобы родительский div не передавал щелчок дочернему div

У меня есть родитель <div />, который занимает всю страницу. В рамках этого родителя <div /> у меня рождается меньший ребенок <div />. Я не хочу, чтобы дочерний элемент <div /> был кликабельным, когда родитель <div /> перекрывает дочерний элемент `.

function parentFunction(event) {
  if (document.getElementById("check").checked) {
    event.stopPropagation();
  }
}

function childFunction() {
  alert("CHILD");
}
    
.child {
  padding: 50px;
  width: 100px;
  height: 100px;
  background-color: hotpink;
  text-align: center;
  cursor: pointer;
}

.parent {
    width: 500px;
    height: 500px;
    filter: blur(2px);
    display: flex;
    justifc-content: center;
    align-items: center;
    align-content: center;
    background-color: lightgray;
}
<body>
  <div
      onclick = "parentFunction(event)"
      class = "parent">
      <div
          onclick = "childFunction()"
          class = "child">
          Child
      </div>
  </div>
</body>

Stop propagation:
<input type = "checkbox" id = "check">

Родитель не передает события дочернему элементу. На дочерний элемент нажимают, и он может распространяться или не распространяться на родителя. Если вы просто полностью удалите onclick = "childFunction()", то в этом случае при нажатии на дочерний элемент ничего не произойдет. Хотя я подозреваю, что реальная проблема, которую вы пытаетесь решить, может быть представлена ​​здесь неточно.

David 16.02.2023 16:55

@David Позвольте мне уточнить: я не могу удалить функцию у ребенка <div />. Что я хочу: когда на дочерний элемент накладывается прент, я не хочу, чтобы дочерний элемент (ы) был кликабельным. Щелчок должен быть зафиксирован на уровне родительского элемента div.

four-eyes 16.02.2023 16:57

родитель не может перекрывать дочерний элемент. что родитель может сделать, так это добавить еще один прозрачный дочерний элемент сверху. этот новый ребенок проглотит эти события щелчка. Обратите внимание: если вы можете изменить CSS, вы можете добавить pointer-events: none для первого дочернего элемента, и тогда вам больше ничего не понадобится (но события клавиатуры и фокус по-прежнему будут возможны)

Adriano Repetti 16.02.2023 16:59
The click should be captured on the level of the parent div. затем вам нужно прослушать событие на родительском этапе на этапе захвата. Или предотвратите любые события указателя на уровне родителя, используя css.
t.niese 16.02.2023 17:00

Как родитель может «перекрывать» дочерний — дочерний находится внутри родителя. вообще непонятно в чем тут дело

Pete 16.02.2023 17:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
5
54
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Как было сказано ранее, распространение идет от ребенка к родителю, а не наоборот.

Ваши возможности:

  • добавить стиль pointer-events: none в дочерний div

или

  • в childFunction() проверьте, существует ли родительский div, и если да, то просто вернитесь;
Ответ принят как подходящий

Вот решение, которое, вероятно, удовлетворит ваши потребности.

Когда вы нажимаете на Parent, который содержит дочерний элемент внутри, он сообщает вам, какой элемент был нажат. Затем вы можете перейти к месту назначения/решению, которое вам требуется в функциональности.

document.querySelector(".parent").addEventListener("click", parentFunction)
function parentFunction(e) {
  if (document.getElementById("check").checked && e.target == document.querySelector(".child")) {
    e.stopPropagation();
    console.info("EXIT")
    return;
  }
  console.info("PARENT says target is: ", e.target)
}
body {
    display: flex;
    justifc-content: center;
    align-items: center;
    flex: 1;
    width: 100vh;
    height: 100vw;
}
    
.child {
  padding: 50px;
  width: 100px;
  height: 100px;
  background-color: hotpink;
  text-align: center;
  cursor: pointer;
}

.parent {
    width: 500px;
    height: 500px;
    filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-color: lightgray;
cursor:pointer;

}
<body>
  <div
      class = "parent">
      <div
          class = "child">
          Child
      </div>
  </div>
</body>

Stop propagation:
<input type = "checkbox" id = "check">

Наоборот, когда вы нажимаете на child, вы не хотите, чтобы событие распространялось на родителя, который перекрывает его, поэтому вместо этого должно быть:

function parentFunction(event) {
  console.info("PARENT");
}

function childFunction() {
  if (document.getElementById("check").checked) {
    event.stopPropagation();
  }

  console.info("CHILD");
}
.child {
  padding: 50px;
  width: 100px;
  height: 100px;
  background-color: hotpink;
  text-align: center;
  cursor: pointer;
}

.parent {
  width: 500px;
  height: 500px;
  filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: lightgray;
}
<body>
  <div onclick = "parentFunction(event)" class = "parent">
    <div onclick = "childFunction()" class = "child">
      Child
    </div>
  </div>
</body>

Stop propagation:
<input type = "checkbox" id = "check">

Другие вопросы по теме