При нажатии на ребенка не учитывайте родителя

Question

Я хочу, чтобы какой-то метод убедил CSS, что когда я щелкаю по одному из дочерних элементов внутри родительского элемента, не считайте, что я щелкнул также по родительскому элементу. Я хочу, чтобы вы попробовали нажать на одного из детей внутри родителя.

  .parent{
    background: blue;
    padding:20px;
    text-align: center;
    margin: 0 auto;
    height: 300px;
    width: 300px;
  }
  .parent:active{
    background: #ddd;
  }
  .child{
    background: red;
    float: left;
    padding: 5px;
    height: 150px;
    width: 150px;
    font-size: 4em;
  }
  .child:nth-child(odd){
    background: pink;
  }

<div class="parent">
  <div class="child">Click me</div>
   <div class="child">Click me</div>
</div>

Answer 1

Дайте родителю div

pointer-events: none;

Нет javascript необходимо.

Answer 2

Используя Javascript, вы можете просто запретить запуск :active на родителе, используя preventDefault для mousedown события на дочерних элементах:

document.querySelectorAll('.child').forEach(child =>
  child.addEventListener('mousedown', (event) => {
    event.preventDefault();
  })
);

.parent {
  background: blue;
  padding: 20px;
  text-align: center;
  margin: 0 auto;
  height: 300px;
  width: 300px;
}

.parent:active {
  background: #ddd;
}

.child {
  background: red;
  float: left;
  padding: 5px;
  height: 150px;
  width: 150px;
  font-size: 4em;
}

.child:nth-child(odd) {
  background: pink;
}

<div class="parent">
  <div class="child">Click me</div>
  <div class="child">Click me</div>
</div>

Answer 3

Нет, поведение CSS :active нельзя изменить с помощью CSS.

Псевдокласс: active обычно используется для элементов. Другие распространенные цели этого псевдокласса включают элементы, которые содержат активированный элемент, и элементы формы, которые активируются через их связанные.

Решением для этого было бы создание собственного поведения с помощью JavaScript , При щелчке по родительскому элементу проверьте, находится ли мышь на самом родителе или дочернем элементе внутри него. Когда это родитель, добавьте класс к родительскому элементу. И удалите этот класс при отпускании мыши.

const parent = document.querySelector('.parent');

parent.addEventListener('mousedown', function(event) {
  if (event.target === parent) {
    parent.classList.add('active');
  }
});

parent.addEventListener('mouseup', function(event) {
  parent.classList.remove('active');
});

.parent{
    background: blue;
    padding:20px;
    text-align: center;
    margin: 0 auto;
    height: 300px;
    width: 300px;
  }
  .parent.active {
    background: #ddd;
  }
  .child{
    background: red;
    float: left;
    padding: 5px;
    height: 150px;
    width: 150px;
    font-size: 4em;
  }
  .child:nth-child(odd){
    background: pink;
  }

<div class="parent">
  <div class="child">Click me</div>
   <div class="child">Click me</div>
</div>