Избегайте этого события click для кликающего события инициирующего контента для родительского элемента.

Question

Если у меня есть такой макет:

html

css

.container {
  position: relative;
  max-width: 800px; /* Maximum width */
  margin: 0 auto; /* Center it */
}

.container:hover .content {
  display: block;
}

.container .content {
  position: absolute; /* Position the background text */
  bottom: 0; /* At the bottom. Use top:0 to append it to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  width: 100%; /* Full width */
  padding: 20px; /* Some padding */
  display: none;
}

что я могу сделать, когда я нажимаю на любую кнопку внутри hoverable .content div, щелчок события для родительского элемента не инициируется? Прямо сейчас, когда я это делаю, отображаются 2 оповещения с сообщениями «щелкни в тесте х», а затем «щелкнул в контейнере».

Answer 1

Вам следует прекратить распространение события (всплывающее сообщение), поэтому ваш родительский компонент не будет запускаться

Хотя вы должны избавиться от предотврашения по умолчанию, оно вам не нужно

<script type="text/javascript">
         function action(evt, elem) {
           evt.preventDefault();
           evt.stopPropagation();
           evt.stopImmediatePropagation();
           alert('clicked in '+elem.innerText);
         }
</script>