Блог

Главная - Вопросы по программированию - OnClick на дочернем div не должен запускать метод onClick родительского div для определенного дочернего

OnClick на дочернем div не должен запускать метод onClick родительского div для определенного дочернего

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

Рассмотрим следующий компонент React

 export default function App() {
  return (
    <div className="App" onClick={() => console.log("on app div")}>
      <div className="first" onClick={() => console.log("first div")}>
        first
      </div>
      <div className="second" onClick={() => console.log("second div")}>
        second
      </div>
      <div className="third">third</div>
    </div>
  );

}

Таким образом, щелчок по дочернему div в настоящее время запускает методы onClick как родительского, так и дочернего div. Но для первого дочернего элемента я бы хотел, чтобы запускался только дочерний метод onClick. Есть ли способ сделать это?

Я пытался присвоить дочернему div более высокое значение z-index, но он все еще запускает оба onClicks, вот css, который я пробовал

 .App {
  font-family: sans-serif;
  text-align: center;
  position: relative;
}
.first,.second,.third {
  position: absolute;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.first {
  background: lightblue;
  position: absolute;
  z-index: 10;
}

.second {
  background: lightcoral;
  position: absolute;
  left: 200px;
}

.third {
  background: lawngreen;
  position: absolute;
  left: 100px;
}

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

Комментарии:

1. e.preventdefault — это ваш frind здесь.

2. Event.preventDefault() и / или event.stopPropagation() могут помочь здесь внутри функций click

3. @AtulRajput не могли бы вы сказать, в какой div я должен добавить e.preventDefault

4. откуда вы не хотите, чтобы ваше событие переходило к его родительскому элементу, т.Е. К вашему дочернему элементу

Ответ №1:

вы должны использовать event.stopPropagation()

 <div className="second" onClick={(event) =>
    event.stopPropagation()
    console.log("second div")
 }>
    second
</div>

Комментарии:

1. Это сработало, спасибо, не могли бы вы также сказать, имеет ли здесь какой-либо смысл подход, который я пробовал с z-index, т.е. Разве z-index не должен работать таким образом?

2. Подход Z-index для этого неверен, с помощью z-index вы можете управлять щелчком только по 2 родственным элементам, но в любом случае произойдет пузырьковое событие, и оно перейдет к родительскому, поэтому, если вы когда-нибудь захотите этого добиться, z-index не поможет, толькоданное решение будет.

3. это может сработать для вас, но может иметь побочные эффекты для стилей и в соответствии с документами e.stopPrppagation() — рекомендуемый способ

Метки: